How to Create Tooltip Using Twitter Bootstrap | Code Snippet #12

Create-Tooltip-Using-Twitter-BootstrapCode Snippet #12: The code snippet creates tooltip using the Twitter Bootstrap plugin.

In our previous post, we saw some awesome jQuery plugins to create tooltip. But, we never touched upon the Twitter bootstrap plugin, which can be used to create Twitter style tooltips using small lines of codes. We need to just add the bootstrap JavaScript, jQuery plugin and the Twitter bootstrap CSS to the html document to make the tooltip work.

Tooltips are a very useful to show important information on mouse hover on certain elements. Hence, thought of concentrating on little bit of tooltip code snippets. Before, we see the code, check out the demo below:

DEMO:(Hover on the icons below)

The code snippet(JavaScripts):

The code snippet (HTML):


The code which does the magic here is the below code snippet:

The code starts after the window is loaded and the DOM is ready, we reference the id with names tooltip1 and tooltip2 to call the function tooltip(). Hope you enjoyed the tooltip demo and code snippet. This can be used in your projects and websites to enrich the user experience on the web page.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...