Databases
StackOverflow2013
Postsdbo
POjQuery /CSS - get position of relative element, position tooltip accordingly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery /CSS - get position of relative element, position tooltip accordingly
    text
    copied!<p>I have a map showing various locations which when hovered over will show a tooltip next to the cursor revealing information regarding that location.</p> <p>The map is a background image of the main ul id="map", with each location being a li. The location is positioned by css using top and left.</p> <p>The #map is positioned relative and the tooltips are positioned absolutely.</p> <p>The markup I have is as follows:</p> <pre><code>&lt;ul id="map"&gt; &lt;li&gt;&lt;a href="#" class="harewood tip_trigger"&gt;&lt;img src="images/marker.gif" width="12" height="12" alt="" /&gt; &lt;span class="tip"&gt;&lt;img src="images/thumb.jpg" width="143" height="107" alt="" /&gt;Title&lt;br /&gt;Click marker for details&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; </code></pre> <p>I can show and hide the .tip span using jQuery no problem, but I'd like to get the position of the parent .tip_trigger, and offset the tooltip from the cursor by, say, 10px.</p> <p>How would I amend the jquery code below?</p> <pre><code>$(document).ready(function() { //Tooltips $(".tip_trigger").hover(function(){ var pos = $("#map").position(); var width = $(".tip").width(); tip = $(this).find('.tip'); tip.show(); //Show tooltip tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" }); }, function() { tip.hide(); //Hide tooltip }); }); </code></pre> <p>I've been messing with this for a while, have tried jquery documentation and just can't figure it out.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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