CSS Tooltips
 

We can create a tool tip using CSS. When mouse over the link the tool tip content will display otherwise display none.


a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}

Tooltip Extra info

nice css technique

I have a technique of tool tip. Code is bellow

a[data-tooltip]:link, a[data-tooltip]:visited {
position: relative;
text-decoration: none;
border-bottom: solid 1px;
}

a[data-tooltip]:before {
content: "";
position: absolute;
border-top: 20px solid #0090ff;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}

thank you for this quick code that can be helpful

I read your CSS Tips - Thanks for share Good Knowledge

thank you for this simple trick!

thank you!

Thanks for this topic.

that nice. could you share more tooltips if you have. I appreciate your work.

Just what I was looking for, Thanks!

thanks for sharing this info.....