hovering elements over the links in an arbitrary HTML

I have an arbitrary HTML I am outputting to a page inside of a table, and I need to be able to "layer" elements over all of the links (one per link).

My current solution is to search the HTML for the links (which I have in a separate array from another source), then insert a div with a different z-index and position absolute into the HTML. This works some of the time, and breaks bizarrely other times.

Is there something that I'm missing here? I've seen nice impl开发者_C百科ementations of this on various forums, but they are slightly different in that they usually require interaction from the user to come up, I want mine to be up all of the time.

Long question short, is there an easy way to do this?

---

Using Javascript (and specifically jQuery), yes.

There are many tooltip libraries out there.

• http://plugins.jquery.com/project/tooltips
• http://flowplayer.org/tools/tooltip/index.html
• http://craigsworks.com/projects/simpletip/

I'd say the top one would suit your needs the best. To enable it to be "always on" you'd set the css element .tooltip as follows:

.tooltip {
    display:block; // This replaces the "none" they have in the example, but the line itself isn't necessary
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff; 
}

---

Two things come to mind to see if you get getter results. 1) have you tried relative positioning inside the table cells instead of absolute positioning? 2) is your script firing after the table is rendered? If not, be sure it runs after the entire table is rendered.