JavaScript – ToolTip class
The title and alt attribute on images and links are useful as they provide additional accesability information to the user. They are also necessary for creating valid, standard conform XHTML documents. The only probelm is, how browsers render the information: with an ugly light yellow box containting a standard font type.
The JavaScript ToolTip class gives gives you maximum control over all tooltips on your site. Using CSS for styling, it displays the title attribute of any XHTML Element in an user defined way. Based on the protoype and scriptaculous frameworks it is very flexible in use and easy to adopt to your needs. All you have to do is to define a style class, marking all necessary items with a rel='tooltip' attribute and include the js files in your site.
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='scriptaculous.js?load=effects'>
</script><script type='text/javascript' src='tooltip.js'></script>
<!-- define tooltip style -->
<style type='text/css'>
.ttstyle{
background-color:#333;
padding: 1px 3px;
color: #fff;
font-size:9px;
position:absolute;
top:-200px;
}
</style>
<!-- activate tooltip for elements -->
<div id="one" title="just some placeholder" rel="tooltip">Lorem ipsum</div>
<img src="image.jpg" id="img" title="a nice shot" rel="tooltip"/>
What the class does after it’s auto-initialization, is grabbing all elements containing the rel and a title attribute. For each of these elements, a new ToolTipItem is created, encapsulating the event handler for over mouse over and out actions. For preventing the browser showing both tips, the custom and browser based one, the attributes are cleared by manipulating them via the DOM.
Check out the tool tip demo or download the sources: JavaScript ToolTip
Comments are closed.