How to use the Bootstrap tooltip

What is a tooltip?

In simple terms, the tooltip gives a short text description to whatever it is attached to when a user hovers over it. The tooltip is pop-up text in a box form that shows up when the user hovers the mouse pointer over an element.

Example

Let's look at the example below:

Explanation

In the code above, we apply the tooltip on a <button> element:

• Line 16: We use the data-toggle='tooltip' to show the tooltip using the bootstrap JavaScript.
• Line 23: We use the data-placement="top" to position the tooltip for this. It displays at the top of the button. The user sees title="Button tooltip" when they hover over the button.
• Line 17: The same process is repeated.

Note: Try to play around with the code sample to get familiar with it.