Lesson 21 - Bootstrap - Tooltips

In the previous lesson, Bootstrap - Scrollspy, we finished Scrollspy. Today, in our Bootstrap CSS framework course, we're going to finish the description of the components.

Tooltips

We're getting to the last component of the Bootstrap CSS framework. Tooltips are small info bubbles which are shown when the mouse cursor is hovered over a given element. Typically, they provide additional explanation of a term or a help how to work with an element. It's basically a fancier form of the information inserted in the title HTML attribute of any element. By default, this information is shown by the browser after a few moments of holding the cursor over a particular element. Tooltips look graphically better and are shown immediately. Due to the similarity with title, we write the content of tooltips into this attribute as well and assign an extra data attribute.

Initialization

Tooltips are not initialized automatically for optimization reasons. We have to take care of that manually. For this purpose, we usually place the following code before the closing </body> tag:

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

Restrictions similar to other components based on Popper.js are applied here. If the tooltip doesn't have the title set, it doesn't show up. When using tooltips in complex structures we should set them container: "body". Tooltips of hidden elements won't show up. If we wanted to show them on elements with the disabled attribute or the .disabled class, we'd have to wrap this element and use the tooltip on the wrapper. If we apply the tooltip on a link wrapped on multiple lines, it'll be shown in the center. This behavior can be changed by assigning white-space: nowrap to the <a> element. If we wanted to remove the elements from DOM, we first have to hide their tooltips. We should bind tooltips to links and form elements only. These are elements which can be selected by the keyboard and the user naturally expects them to be interactive. They will be supported by screen readers thanks to this.

Example

The example will be very simple this time, we're going to apply the tooltip on a button and a link. Let's have a look at how to change its position and how to place HTML contents inside.

<br /><br /><br />
<p>The <a href="#" data-toggle="tooltip" title="This information bubble :)">tooltip</a> will show up when hovered over the button below.</p>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="We support the png and jpeg files. This tooltip is on the right.">
    Attach an image
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="It's possible to place <strong>HTML code</strong> inside tooltips as well.">
    HTML Tooltip
</button>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

Of course, to achieve this functionality, JavaScript, or more precisely Popper.js which we're already familiar with, is needed. Popper.js is already included if you're using the Bootstrap's JS bundle. We fill out the title attribute of the elements on which we want the tooltip to show up. Next, we assign the data-toggle="tooltip" data attribute. Don't forget to explicitly initialize the component at the end of the page as well. The result in the browser:

To specify the position of the tooltip, we added the data-placement="right" attribute. To enable processing HTML content, we added the data-html="true" attribute.

JavaScript

Since tooltip is a JavaScript component, again, we have wide options of controlling it in JavaScript.

Properties

All the properties listed below can be set using data attributes. To get the name of the attribute, we just add the data- prefix to the property. If we wanted to initialize the properties in JavaScript, we can do so by passing an object with these properties to the popover() method:

$('#some-tooltip').tooltip({ animation: false, title: "Information" });

• animation - Whether an animation should apply (true by default).
• container - Binds the tooltip to a given element. Using container: body causes the tooltip to stick to the <body> element. That way it stays at the correct place even when the screen size is changed. The default value is false.
• delay - The delay in milliseconds before hiding/showing the tooltip. We can specify it either by a single number or by both values passed as an object with the following structure: delay: { "show": 250, "hide": 50 }. The default value is 0.
• html - Whether HTML content is supported in the content (content). The default value is false, meaning that the whole content will be rendered as plain text (using the jQuery's text() method).
• placement - Defines the position of the tooltip, we can provide the values "auto", "top", "bottom", "left", and "right", the default is "right". We can also pass a function to which will be passed the DOM element with the tooltip as the first parameter and the element which triggered the tooltip as the second parameter. The this context is set to the tooltip instance.
• selector - If we provide a particular selector to this property, the tooltip will work even on dynamically inserted content. Otherwise, the tooltips will become active only on elements present at the first page load. The default value is false.
• template - The HTML template from which the tooltip is created. The title will be placed into an element with the .tooltip-inner class. An element with the .arrow class will be used as the arrow. The element wrapping the entire tooltip should have the `.tooltip' class assigned. The default value is:

'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

• title - Represents the default title if not specified by the data-title data attribute of a given element. We can also pass a function which is then called in the context of this referencing the element the tooltip is bound to. The default value is "" (empty string).
• trigger - Specifies the way the tooltip is displayed/hidden. We can pass the values "click", "hover", "focus", "manual". We can even enter multiple values, separated by a comma, except for "manual" which cannot be combined. The default value is "click".
• offset - Allows to move the tooltip relatively to its element. We move it either by the same distance in both directions, providing only a single value, or providing two values separated by a comma. We provide multiple values as a string (e.g. "10%, 10px"). We can also use math expressions. The default value is 0.
• fallbackPlacement - Specifies in what position will the tooltip be if it doesn't fit in the predefined one. We can provide the values "flip", "clockwise", "counterclockwise" or an array of values. The default value is "flip".

Methods

All the methods are called asynchronously and are passing control flow before the animation (transition) finishes. If we call a method on a tooltip which transition is currently in progress, this call will be ignored.

We can pass one of the following parameters to the tooltip() method:

• settings - We can pass an object with properties to specify settings we shown above.
• "show" - Shows the tooltip of an element. Passes the control flow before the animation finishes and the element is actually hidden/shown.
• "hide" - Hides the tooltip of an element. Passes the control flow before the animation finishes and the element is actually hidden/shown.
• "toggle" - Hides/shows the tooltip of an element. Passes the control flow before the animation finishes and the element is actually hidden/shown.
• "dispose" - Hides and disposes of the tooltip of an element. You may not be able to dispose tooltips with the selector specified.
• "enable" - Enables the tooltip of a given element to be displayed. Displaying is enabled to tooltips by default.
• "disable" - Disables the displaying of the tooltip of a particular element.
• "toggleEnabled" - Enables/disables the tooltip of a particular element to be displayed.
• "update" - Updates the tooltip position.

Events

Under certain circumstances we may need to handle individual tooltip events. There are 5 of them:

• show.bs.tooltip - Is called immediately after show is called. The element is typically not shown yet because the animation is playing.
• shown.bs.tooltip - Is called right when the popover is shown (once the animation finishes).
• hide.bs.tooltip - Is called immediately after hide is called. The element is typically not hidden yet because the animation is playing.
• hidden.bs.tooltip - Is called when the popover is hidden (once the animation finishes).
• inserted.bs.tooltip - Is called after the show.bs.popover event, when the template is added to the page DOM.

Handling an event could look like this:

$('#info-tooltip').on('hidden.bs.tooltip', function () {
    // some reaction...
});

Congratulations, by finishing this lesson you have complete knowledge of all Bootstrap components! It's respectable that you've come this far, a lot of students surely gave up. The good news is that very useful lessons are coming soon. We'll master flexbox and finally the grid system as well. In the next lesson, Bootstrap - Utilities, we'll introduce all Bootstrap utilities we didn't describe while learning the components.