tooltip like control on the div

Question

Hi,

does anyone know how to create a tooltip on the div. On my page, i have 4 div and I want every time the user mouse over on a div, it will show down the tooltip from the top and after few seconds the tooltip will be automatically hidden..

THANKS

Answer 1

If you can use javascript and JQuery it's pretty simple, take a look at

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for example

Doing it in pure html and css would be more complicated. You could play with :hover, absolute positioning and z-index to achieve it.

Answer 2

You can use the title attribute:

<div id="myDiv" title="My Tool Tip Text here">Div Stuff</div>

Or take a look at this (A javascript example, does not automatically hide, but could be easily modified to do so):

http://djgdesign.co.uk/display.php?id=47

Answer 3

I would recommend you the TipTip jQuery Plugin its very easy to adapt and also easy to extend. Ask if you need help with this.