What is Bootstrap 4 tooltip?

Overview

Tooltip is a small box that appears near an element in the DOM when the user hovers over the element. It is used to provide information to the user about the element or component.

Create a tooltip with Bootstrap 4

We can create a tooltip with bootstrap 4 by adding the data-toggle="tooltip" attribute to the element.

Syntax

<element data-toggle="tooltip" title="displays text in tooltip">
</element>

In the title attribute, we provide the text that needs to be displayed in the tooltip.

Code example

Code explanation

In the code written above:

• In lines 7–10, we include all the prerequisites that are needed to run this tooltip, which are Bootstrap, Jquery, and Popper.
• In line 16, we create a tooltip, using Bootstrap 4. We provide the data-toggle="tooltip" attribute. We also provide the text Hi, I am tooltip as the title attribute. This text will be displayed when the user hovers over the element.
• In lines 20–22, we enable all the tooltips in the DOM when the document is ready.

Position the tooltip

We can display the tooltip in the positions top, bottom, left, or right of the element. We can achieve this by providing the data-placement attribute to the element.

Note: While positioning the tooltip, if there isn’t sufficient space to show the tooltip in the desired position, then it will be displayed in another position.