Bootstrap 3 Tooltips

A tooltip is a small “box” with information that will be displayed when you hover over an item on a web page. A tooltip is only meant for a small amount of textual information. If you want to use a “hover box” that can display more text and images a popover would be better.

If you have looked at the explanation in the Bootstrap 3 Tooltips section on their website and aren’t sure you understood all of it then this tutorial aims to clarify those issues. Tooltips appear simple by the look of them but you wouldn’t be the first to have questions about how to insert and style them. 

Tooltip basics

The Bootstrap website tells us that the markup below serves to insert a basis tooltip:

Examples Click on one of the tooltip-links in the text to see a working example

We’ll first apply that before we move on to other options. Below you see a standard bit of  HTML where I have inserted a basic tooltip.
DEMO - Tooltip basic

Tooltip requirements

As you can see in the example above we need three things to create a tooltip:

  1. to distinguish the element with the tooltip from the rest of the content on the web page we changed the element (a word in a paragraph) into a link; which by default will get a different color and/or underline when rendered in a browser.
  2. we then assign the attribute “data-toggle=”tooltip” to the opening anchor tag.
  3. and finally we insert the script (after the links for the jQuery library and the Bootstrap plugins file but before the closing body tag) with the tooltip function. The jQuery function can be recognized by the $ sign. The script selects one or more element(s) with anchor tags and turns them into a jQuery object. Because objects can have properties we can then attach the tooltip method. In this instance we didn’t specify any options for the tooltip method and rely on the default values (e.g. to display the tooltip on hover, to dynamically position the tooltip, etc.).
Important! Without the tooltip script your tooltip(s) won't work!
Although the Bootstrap website tells us that “You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.” this isn’t true for the tooltip (and popover) plugin.

As you can see in the markup above I have left out the href attribute. Although it’s part of the basic markup provided on the official Bootstrap website it’s not needed unless you actually want the link to be used to direct visitor to another page/address.

Different tooltips

So what else could we do with the tooltip? We could also:

  • only display the tooltip on click instead of on hover:
    DEMO - Tooltip on click
  • make different tooltips react to different triggers:
    DEMO - Tooltips with different triggers

    If you insert 2 tooltips in a web page both with anchor tags and want only one of those two to display on click you could achieve this with:

    Tooltips on this page will by default display on hover, but one of the tooltips has been set to display only on click with the attribute ‘data-trigger=”click” ‘.
  • position one tooltip differently with the option “placement”.
    DEMO - Tooltip data-placement

    To achieve this we use the attribute “data-placement” like this:

    To change the placement for all tooltips on a page we would instead do this:
    When you use the last solution do not insert the data-placement attribute as well. Or use it only for a tooltip where you want to have a different placement compared to the other tooltips on the web page.
  • The last tooltip option I’ll show you is how to attach a tooltip to an attribute selector
    DEMO - Tooltip attached to attribute selector The script only targets the link with the href attribute that contains “”. The other tooltip in this example is dysfunctional. We didn’t include a script that actually targets elements with a tags as such. But with the examples above you could easily add such a script.

We could also look into how you can style a tooltip differently. But since I am going to cover that topic in a tutorial about Popovers I won’t do that here for Tooltips as well. Most of the things you can do with Tooltips apply to Popovers and vice versa.

Add your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.