I have spans of text within a paragraph that I want users to be able to hover over for more information (a term definition, further clarification, etc.). I've done this before by using static, absolutely-positioned divs that jump up the z-index order and become "visible" (non-transparent) when the "trigger" element is hovered over, and it works just fine.

What I'm specifically looking for is an informational div/span that would be anchored to the cursor, so slight movement of the cursor also moves the info div/span.

Is it possible to do this with just CSS? (I'd like to avoid JS solutions, if possible)

1 answer


You will need to use Javascript to track the mouse movements. I don't think it can be accomplished using CSS alone.

Google search jQuery tooltip - there's some great scripts out there.

I've personally used this one, it supports mouse tracking - see 6th example down.

Answered about 9 years ago by Marko Ivanovski