The other day we had a request from a client to provide a rollover effect to display data.  They only wanted it to display when a text area was hovered.  One of my coworkers and I came up with a solution that fit our needs.  I tweaked it a bit from using a DIV to using links and span tags. This makes it more flexible. Here is what I came up with. This solution that is cross-browser compatible.

First I start by setting up the link.  The point of setting the z-index is to make sure the "popup" effect floats above all other elements on the page. 

I am made two classes, rollover for the link and tooltip for the text to show.  This will distinguish between other a link and span tag attributes on the page. 

Initially the span tooltip is set to not display.  The final part of the CSS is what the span tag looks like when the link is hovered.  This is where there is a lot of flexibilty on how you want your tooltip to look.  I positioned the tooltip absolute based on the relative position of the link. 

I played with the colors and padding to come up with something I liked.  This can be changed to fit your sites needs of course.

Here is the full code for your enjoyment!

PureCSSRolloverPopupEffect.zip (2.28 kb)