Bootstrap 4 Tooltips Tutorial

Tooltips are a piece of marker text that will appear when you hover the mouse over a hyperlink. In Bootstrap 4, 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 4 Tooltips Tutorial

This tutorial covers the following chapters:

  1. Basics of Bootstrap 4 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 4 Tooltips

  • Tooltips is JavaScript component, hence you should include jQuery and 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 jQuery, 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 4 uses CSS animation and data attributes to control the behavior of tooltips.
Related:  Bootstrap 4 Navbar Tutorial

Offer: Get 92% discount of Mobirise Bootstrap site builder.

2. Initializing Tooltips in Bootstrap 4

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 () {
$('').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.
  • The title text entered will be shown on the popup tooltip.
  • 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:

Tooltip on Link

4. Positioning Tooltips

As you might have noticed 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.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Related:  Animated Progress Pie Chart Widget for Weebly

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:

Tooltip on Buttons

6. Using HTML Content Inside Tooltip

By default only text content is supported inside a tooltip. 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:

HTML Tooltip

7. Tooltip Customizing Options

Tooltips can be further customized 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.

Bootstrap 4 tooltips will not work on IE8 or lower as Tether is not supported.

Recommended Articles:

Leave a Comment