Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use the events onShow and onHide on each of your tooltips and do modifications to the trigger object. I'll show this to you with your code. Here are your trigger button divs:</p> <pre><code>&lt;div id="eleven_div" class="button-eleven" style="display: block; "&gt; &lt;a href="projects/gantt/" id="button"&gt;Button 11&lt;/a&gt; &lt;/div&gt; &lt;div id="ten_div" class="button-ten" style="display: block; "&gt; &lt;a href="projects/table/" id="button"&gt;Button 10&lt;/a&gt; &lt;/div&gt; ... </code></pre> <p>And the corresponding javascript:</p> <pre><code>$(".button-one").tooltip({ position: "center right", delay:300, effect: 'slide', direction:'right', offset: [30, -12], slideOffset: 30, slideFade:'true', slideInSpeed:350, slideOutSpeed:250 }); $(".button-two").tooltip({ position: "bottom left", delay:300, effect: 'slide', direction:'left', offset: [-34, 20], slideOffset: 30, slideFade:'true', slideInSpeed:350, slideOutSpeed:250 }); ... </code></pre> <p>First you have the attribute id="button" inside each of your a-tags inside the divs. It is absolutly wrong. Ids must not occur twice. So better change this into classes:</p> <pre><code>&lt;div id="eleven_div" class="button-eleven" style="display: block; "&gt; &lt;a href="projects/gantt/" class="button"&gt;Button 11&lt;/a&gt; &lt;/div&gt; &lt;div id="ten_div" class="button-ten" style="display: block; "&gt; &lt;a href="projects/table/" class="button"&gt;Button 10&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Now place the callback function for the red dots to be shown. The function is called every time a tooltip is shown or will be hide again. And it adds or removes a class to the a-tag inside the triggering div. New code:</p> <pre><code>function hovering() { this.getTrigger().find("a").first().toggleClass("hovered"); } $(document).ready(function() { $(".button-one").tooltip({ position: "center right", delay:300, effect: 'slide', direction:'right', offset: [30, -12], slideOffset: 30, slideFade:'true', slideInSpeed:350, slideOutSpeed:250, onShow: hovering, onHide: hovering }); $(".button-two").tooltip({ position: "bottom left", delay:300, effect: 'slide', direction:'left', offset: [-34, 20], slideOffset: 30, slideFade:'true', slideInSpeed:350, slideOutSpeed:250, onShow: hovering, onHide: hovering }); ... </code></pre> <p>At last change your CSS code, where the styles for #button are located into this:</p> <pre><code>.button { background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px; display:block; height:23px; width:23px; overflow:hidden; text-indent:-999em; cursor:pointer; opacity: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; } /** * mouseover state, * elements with the "hovered" class now behave * like ones in mouseover state */ .button:hover, .button.hovered{ background-position:0 -25px; opacity: 1; } /* clicked state */ .button:focus { background-position:0 -25px; } </code></pre> <hr> <p>To have the tooltip getting closed when a link is clicked, put this code after your tooltip definitions:</p> <pre><code>$(".tooltip, .tooltip-brite, ... all your tooltip-classes").live("click", function() { $(this).prev().tooltip().hide(); }); $(".button-two, .button-one, ... all your button-classes").live("click", function() { $(this).tooltip().hide(); }); </code></pre> <p>This will close the tooltip when ether the div with the red dot indside or the tooltip box is clicked.</p>
    singulars
    1. This table or related slice is empty.
    1. POjQuery Tooltip and Mouseover Integration
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USm2k
    1. USm2k
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COMaybe i'm doing something wrong, but I tried your suggested code, and it just shows the tooltip, nothing new happens. I'm trying to find a way to tie the red dots filling in to the tooltips, so that each one does not turn off while hovering over its related tooltip.
      singulars
      1. PO
      1. USuser1204248
    2. CObelow is the css code of the circle sprite for each button - i'm trying to somehow tie these to each of the tooltips. For example, if the mouse moves over red circle button 11 and then onto the tooltip for button 11, I do not want the red circle hover state to turn off until it leaves the tooltip. `#button { background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px; display:block; height:23px; width:23px; } #button:hover { background-position:0 -25px; opacity: 1; }`
      singulars
      1. PO
      1. USuser1204248
    3. COthanks for walking me through that, it works perfect! Thanks makes sense now. One more thing, what is the best way to make sure the tooltip is closed when any link is clicked inside of it? For some reason on mobile devices (iPad), when you finger hits to open the hover state and then you hit a link on it to go to another page, and then hit the back button back to the map, the last tooltip stays stuck open.
      singulars
      1. PO
      1. USuser1204248
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload