Adding Value to Your Content With a Bootstrap Tooltip

Some electronic book readers come with an inbuilt function of a dictionary: as you press an unclear word, a popup with an explanation appears. This lets you quickly get the information you're looking for without pausing your activity. Such temporary popups are useful in other areas as well.

One way to add them to your site is by using Bootstrap tooltips. A tooltip is made active by hovering on its parent element: otherwise, it remains unseen. This helps to provide additional information while keeping the overall design looking clean.

In this lesson, you will see how Bootstrap tooltips are made and learn to do it yourselves. You will also understand how to modify their position.

Bootstrap Tooltip: Main Tips

• A Bootstrap 4 tooltip is a small popup element that appears after hovering over an element for a short period of time.
• You can choose the position a tooltip will appear at when it's triggered.

Creating and Enabling

A tooltip Bootstrap can be created for any HTML element. To do that, you should add the data-toggle="tooltip" attribute to cause a popup to appear, and then use the title attribute to set the content of the tooltip.

Take a look at how it should look like in a simple HTML example:

<a data-toggle="tooltip" href="#" title="I'm a tooltip">Tooltip element</a>

To avoid your Bootstrap tooltip not working, you must use this jQuery code inside the <script> tags:

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

Modifying the Position

You can also choose whether your Bootstrap tooltip appears to the right, left, top, or under the element it is assigned to. This flexibility makes it easier for the component to adapt to the overall design of your website.

To choose the position, use a data-placement attribute with a relevant value, like the code example below suggests:

<a data-toggle="tooltip" href="#" data-placement="top" title="I am a tooltip">Tooltip element</a>
<a data-toggle="tooltip" href="#" data-placement="bottom" title="I am a tooltip">Tooltip element</a>
<a data-toggle="tooltip" href="#" data-placement="left" title="I am a tooltip">Tooltip element</a>
<a data-toggle="tooltip" href="#" data-placement="right" title="I am a tooltip">Tooltip element</a>

Bootstrap Tooltip: Summary

• A tiny popup element that appears temporarily under its parent element as you hover over it is called a tooltip.
• When you're creating a tooltip Bootstrap 4 also allows you to modify its position.
• In case of your Bootstrap tooltip not working, make sure you have used the necessary jQuery code.