Yet Another jQuery Tooltip Plug-in
Taking a break from Project Arcturus, today's post will be detailing a jQuery plug-in I just wrote. I needed a simple plug-in to display tooltips on specific elements. After browsing through the jQuery plug-ins I couldn't find something simple enough to suit my needs.
Basic requirements
I wanted to make sure that the plug-in remained simple to use. Therefore, any HTML element can be used to display a tooltip. All it needs is a title attribute:
Notice the pipe (|) used to separate the parts of the title. The plug-in parses the title contents and uses the first part as the tooltip header. The remaining parts are enclosed in distinct paragraphs in the tooltip body. If you clicked on the demo link, you might find that the tooltip looks rather bland. That's because the plug-in doesn't come styled. I really wanted this tooltip to be as simple to use and style as possible. That's why all you need is a little CSS to get this tooltip looking the way you want it. Take a look at the following markup:
<h2 id='rzTooltip_header'>Tooltip header</h2>
<div id='rzTooltip_body'>
<p>Some content</p>
<p>Some more content</p>
</div>
</div>
Now here is a fully skinned tooltip example:
<script type="text/javascript" src="/scripts/dimensions.js"></script>
<script type="text/javascript" src="/scripts/jQuery.rzTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("span[@title]").rzTooltip();
});
</script>
<style type="text/css">
#rzTooltip {
width: 350px;
}
#rzTooltip_header {
background: url('images/tooltip_top.gif') top left no-repeat;
}
#rzTooltip_body {
background: url('images/tooltip_bottom.gif') bottom left no-repeat;
}
#rzTooltip_header {
padding: 5px 5px 0 5px;
margin: 0;
border-bottom: 1px solid #369;
color: #006;
}
#rzTooltip_body {
padding: 5px;
}
#rzTooltip_body p {
margin: 0 0 10px 0;
}
</style>
<span title="This is my Tooltip|Fear me!"></span>
In an upcoming post, I'll show you how build a simple jQuery plug-in like this one.
Chocolate pudding.
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]