Jquery tooltip absolute position above a link which is inside paragraph text?
- by BerggreenDK
I am trying to retrieve the position of an HTML element inside a paragraph. Eg. a span or anchor. I would also like the width of the element.
So that when I hover the object, I can activate/build/show a sort of toolbar/tooltip above the element dynamically.
I need it to be dynamically added to exisiting content, so somekinda "search-replace" jQuery thingy that scans the elements within eg. a DIV and then does this for all that matches this "feature".
Main problem/question is:
How do I retrieve the "current absolute" position of the element I am hovering with the mouse. I dont want the toolbar/tooltip to be following the mouse, but instead it must "snap" to the element its hovering. so I was thinking: "place BOX -20px from current element. Match width....
Possible? is there a jQuery plugin for this already - or?
Sample code:
<div class="helper">
<h1>headline</h1>
<p>Here is some sample text. But <a href="somewhere.htm" class="help help45">this is with an explanation you can hover</a>. <a href="somewhereelse.htm">And this isnt.</a>
<ul>
<li>We could also do it <a href="somewhere.htm" class="help help32">inside a bullet list</a></li>
</ul>
</div>
The .help is the class triggering the "help" and the .help45 or .help32 is the helpsection needed to be shown (but thats another task later, as I am hoping to retreive the "id" from the "help45" so a serverlookup for id=45 can load the text needed to be shown.
Nb. if the page scrolls etc. the helptip still needs to follow the item on the page until closed/hidden.
