How to Create Bootstrap 5 Tooltips?

Tooltips are a piece of marker text that will appear when you hover the mouse over a hyperlink. In Bootstrap 5, there are certain things you should take care before trying to add tooltip. If you have noticed the starter template contains a new third party JavaScript library called Popper. This is mainly used for the tooltip component for positioning.

Bootstrap 5 Tooltips Tutorial

This tutorial covers the following chapters:

1. Basics of Bootstrap 5 tooltips
2. Initializing tooltip
3. Using tooltip with anchor tag
4. Positioning of tooltips
5. Using tooltip with buttons
6. Adding HTML content in tooltip
7. Customizing options

1. Basics of Bootstrap Tooltips

• Tooltips is JavaScript component, hence you should include bootstrap.min.js files on your HTML template. Alternatively you can also use the combined script file bootstrap.bundle.min.js.
• Also for proper positioning of tooltips, you should include popper.min.js on all your source code.
• Tooltips will not be loaded by default due to the performance of page loading. Hence, needs to be initialized with the parent element for loading on the page.
• The sequence of script files should be popper.min.js, bootstrap.min.js and then the initialization script.
• There are no images used in tooltips and the concept is based on Facebook style tooltips created with Tipsy jQuery plugin.
• Tooltip with zero title length will not be shown.
• Bootstrap uses CSS animation and data attributes to control the behavior of tooltips.

2. Initializing Tooltips in Bootstrap

Unlike other Bootstrap components, tooltips are to be initialized before the usage. You can add global initialization like below or use specific element level initialization if required.

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

Below is the code for activating tooltip at anchor element level.

<script>
$("a").tooltip();
</script>

Below is the code for using button for initializing:

<script>
$("button").tooltip();
</script>

Remember this script code should be added right after the popper.min.js and bootstrap.min.js links for the tooltip to work as expected. You can check the starter template format here.

3. Using Tooltip on Anchor Tag

Let us first create a simple tooltip using anchor tag. The code should look like below:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip">
Content to Show
</a>

• You should use data-toggle attribute with the value as tooltip.
• Tooltip will show the entered title text on the popup when hovering.
• The content to show part is the anchor text similar to a hyperlink.

The result should look like below on the browser on mouse hover:

4. Positioning Tooltips

As you see in the above example, by default the tooltip will be positioned on top of the content. Bootstrap allows you to position on top, left, right and bottom of the anchor text using data-placement attribute.

• Use data-placement=”top” for top position. This is default so you don’t need to explicitly mention.
• Use data-placement=”bottom” for bottom position.
• Use data-placement=”right” for right position.
• Use data-placement=”left” for left position.

5. Tooltips on Buttons

Let us create four tooltips with different positions on button component.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>

The result on the browser should look like below:

6. Using HTML Content Inside Tooltip

By default, tooltip only supports the text content inside. You can add HTML tags using data-html=”true” attribute. Below is an example of adding strikethrough content inside tooltip using HTML <s>…</s> tags.

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>">
Content to Show
</a>

As you can see, the content inside title tag is processed with HTML tags when data-html=”true” attribute is set. Below is how it will look like on browser:

7. Tooltip Customizing Options

You can further customize the tooltips by using “data-“ attributes.

• Disable CSS fading effect by adding data-animation=”false” attribute.
• Delay show and hide with data-delay attribute.
• Offset the tooltip from the element using data-offset.

You can refer more tooltip examples from Popper JavaScript site.

Note: Bootstrap 5 tooltips will not work on IE8 or lower as the browser do not support popper.

---

---