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.