CSS ToolTip on mouse hover

We put sometimes  image for each field which gives brief description about that field. When we mouse over that image, small tooltip appeares which gives brief description about that field.

Here is basic css code to create this type of tooltip smart way.

a.info
{
position:relative; /*this is the key*/
z-index:24;
background-color:#ccc;
color:#000;
text-decoration:none
}

a.info:hover
{
z-index:25;
background-color:#ff0
}

a.info span
{
display: none
}

a.info:hover span
{
/*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align: center
}

Now css code is ready to use. Here is the code how to use this css.

<a href=”javascript:void()” >
<asp:Image runat=”server” ID=”img111″ ImageUrl=”~/Images/help.gif” />
<span>This is the tooltip.</span>
</a>

Make sure to specify the tooltip text in span.

Hope this helps you !!!

Posted in Microsoft Technology Tagged with:
5 comments on “CSS ToolTip on mouse hover
  1. Anonymous says:

    Thanks. Your tool tips helped. Question however, when the tooltop box with text is active over a dropdown control in .net, the dropdown box ‘shows through’ the tooltip. Thoughts as to why?

  2. Anonymous says:

    Well a.info span and a.info:hover span is not taking effect and i’m having the tooltip text shown from the start instead of on hover. is the syntax correct???

  3. Atin says:

    hey it’s not as easy to be implemented in my blogger blog, please give an example on your blog, i really need of that, my two cents for you :)

  4. Anonymous says:

    Great tip! Thank You!

  5. Anonymous says:

    Nice tooltip! :) 1 Problem. I have it placed in a Panel, with scroll bars… the tooltips image is outside the panel, when I scroll down, it moves as the screen moves, until I move the mouse on it, then it moves to where it should be… why ?

Ads