How To Create Unique jQuery-Based Tooltips

Tooltip libraries are fairly common amongst the open source community. A quick Google search will net you a series of results which you could apply into any typical project. However it can be difficult figuring out some of the various options for customization. Or even the decision for which library to use can be a struggle at times.

In this tutorial I would like to present 3 unique jQuery libraries for generating tooltips. Each of these has a very different feeling and set of codes to go along with the tips. Additionally you’ll be able to customize the appearance and styles for each tooltip within the related CSS documents. I have attached a demo page for each of the effects, which you can see below.

Demo #1 – Demo #2 – Demo #3 – Download Source Code

1. TipTip

The first plugin I will be introducing is called TipTip created by Drew Wilson. It’s open source and has been updated a few times in the past for minor changes. The current version supports a myriad of additional features such as fading, delays, and trigger effects(hover, click, etc).

The code is also very easy to add into your own webpage. You’ll want to download the latest version from his website or grab a copy off the Github page. Then we only need to copy over the files jquery.tipTip.js and tipTip.css. Both the minified files are condensed and barely take up more than 5-10kb when loading the page. And here is the JavaScript code you’ll need to run on any targeted elements.

$(function(){
  $(".someClass").tipTip();
});

So for any HTML elements with the class .someClass we will display a tooltip on hover. The text which is displayed will come from the title attribute, as is common with most tooltips. But you can actually change this by passing in some optional content as a function parameter. Check out the documentation page to learn a bit more.

2. Tipsy

Now I would say Tipsy is possibly just as good as TipTip in relation to UI performance, but the code bases are quite different. They both support animations but I generally find that Tipsy is more of a basic and minimalist plugin. You can’t go wrong with either library so it would eventually come down to personal preferences. Check out the Tipsy plugin homepage where you can find some more examples of this script.

$(function(){
  $('#example-1').tipsy();
});

You can see there isn’t a lot more code required here than we needed before. Although Tipsy by default will turn off the hover animation so it appears immediately when triggered. This isn’t a bad trait, especially if you are looking for a rock-solid interface feature without delay. We can quickly activate this by passing in the parameters to Tipsy’s function call.

$('#example-fade').tipsy({gravity: 'e', fade: true});

The first bit labeled gravity will determine where the tooltip should originate from. You can choose any of the directions around from North/East/South/West and the side-angles, too. These smaller bits of code can get confusing but within 15-30 minutes you should be able to figure out the process. The required files include a JS/CSS combo which you can grab from the project homepage or from the Tipsy Github page.

3. Bubbletip

If you are looking for something a little more zany and unique definitely try out Bubbletip. This plugin was meant to mimic the same tooltip functionality as you’d find on Panic’s Transmit webpage. You can include file details, plain text notices, or even some HTML.

To grab a copy visit the Google Code repository and pickup their latest zip archive. This will include all the files you need to get Bubbletip working properly. This will include our JavaScript plugin jquery.bubbletip.js, along with a load of extra CSS codes & images. You will notice all these files together located in a sub-folder named “bubbletip”. Just have all these JS/CSS/Image resources copied together and linked into your main document.

The Bubbletip plugin does not limit context based on the element’s title attribute. Instead you are targeting an entirely separate element on the page which is set to display: hidden; during initial page load. Bubbletip will then detect when you are hovering over the target element and this hidden HTML content will be embedded inside a tooltip.

$('#tiplink').bubbletip($('#bbltip'));

This is possibly the most basic code example we can put together. The first selector we are targeting is what we want to listen and trigger this tooltip around. In my demo #tiplink is an ID I’ve attached onto one of the anchor links. Now the 2nd selector towards the end is passed into the function as a parameter. This ID targets the related div element which contains our tooltip HTML code. You can also find some live demos on the official developer’s website.

$('#tipimg').bubbletip($('#bblimgtip'), {
    deltaDirection: 'left',
    animationDuration: 150,
    offsetLeft: -90,
    offsetTop: 90
  });

Just for good measure I also want to include my other code snippet from the demo page. In this case I am targeting an image element which will display a tooltip off to the left side on hover. You can see how many various parameters this plugin allows to be customized. I will argue that Bubbletip is still the most impressive and the most visually appealing, although the code and required files are a lot heavier than other alternatives.

Demo #1 – Demo #2 – Demo #3 – Download Source Code

Final Thoughts

Working with 3rd party jQuery plugins can be exhausting if you’re not familiar with the language. It is very uncommon that developers will need to go into the source code and customize specific settings. Often you will have the ability to pass in parameters with these values already labeled. But I am hoping this tutorial will offer a few great solutions to help sway your choices when deciding on tooltips for your next project.

And of course it is always possible to develop your own tooltips from scratch. This will require a lot more time in development but offers you more flexibility in styling. I still prefer working off open source because there are less worries about bugs and other internal issues which are generally taken care of quickly. But also feel free to share your own ideas or suggestions with us in the post discussion area.