0
JavaScriptless Tool Tips
Tooltips are a useful feature that can be used to elaborate on information without creating another page or linking to another source. It presents the user with immediate results. There are a variety of tooltips available that utilize JavaScripts advantages. Even though most are widely compatible with browsers there is still a small percentage of users that would not see the tooltip when activated with JS.
To solve this problem a CSS solution can be deployed that would work everywhere. There are no bells and whistles but if you require them I would suggest going the JavaScript route.
CSS:
/* Required */
.tooltip{
position:relative;
cursor:default;
}
.tooltip:hover{
z-index:2;
}
.tooltip .tooltipContent{
display:none;
}
.tooltip:hover .tooltipContent{
display:block;
position:absolute;
left:10px;
top:10px;
}
/* Tooltip styling */
.tooltip .tooltipHandle{
font-weight:bold;
text-decoration:underline;
}
.tooltip:hover .tooltipContent{
width:200px;
padding:10px;
background-color:#FFF;
border:1px solid #000;
}
XHTML:
<span class="tooltip"> <span class="tooltipHandle">Tool Tip Example</span> <span class="tooltipContent"> Nullam dolor. Aliquam sem tortor, luctus eu, blandit eu, interdum vel, neque. </span> </span>
To view a working example Click Here.
