Tooltips are one of those essential tricks that every web designer should have in their bag. Essentially a tooltip is a small popup box that gives a quick tip or instructions of some sort. They are a must have tool for designing better layouts and more intuitive user-interfaces. But designing and coding from scratch, at least for me, can be very time consuming. That is why I use Flowplayer.org’s jQuery UI Library (http://flowplayer.org/tools/tooltip/index.html).
Here are 3 reasons why I like the Flowplayer Tootip:
- Easy to use – a couple lines of code is all it takes
- Completely customizable – positioning, timing and styling
- Built in effects – fade, slide, toggle or create your own
The tooltip is so easy to use, I thought I would show you quickly the basic setup to get a working tooltip. So, here we go…
Begin with your html element
<img title="Here is our tooltip!" src="<!-- your image here -->" />
For this example, we are using an image element. We are now going to tie the tooltip to the image’s title attribute so that when you rollover the image, the title shows in the tooltip popup.
Include the jQuery Tools script
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
Be sure the include the call for the jQuery script within your <head></head> section.
Initialize the tooltip with Javascript
<script type="text/javascript">
$("img[title]").tooltip();
</script>
Little bit of CSS for styling
.tooltip {
display:none;
background:url(http://jquerytools.org/media/img/tooltip/black_arrow.png) top center no-repeat;
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
Here is the end result
Extend the script
There are so many different uses and configurations for this tool that I invite you to learn more on Flowplayer.org (http://flowplayer.org/tools/tooltip/index.html). From writing your own effects to customizing the CSS background images, the possibilities are limited only to your imagination. Go ahead and give it a try!