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(); 
});

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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.