Bootstrap 4 - Tooltips

Tooltip and popover are two similar components provided by Bootstrap. When you hover your mouse pointer over an HTML element, you can see some additional information related to that element, which is termed as a tooltip. In this chapter, you will learn about the concepts of Tooltips and their implementation in Bootstrap 4.

What Is a Tooltip Used in HTML?

The tooltip is a hint text that is a common GUI element used in website design. It is used with a cursor pointer. A tooltip with some information appears when a user moves the pointer to an HTML element and removes it without clicking.

How to Create Tooltip Using Bootstrap?

The following HTML code snippet shows the bootstrap tooltip implementation by specifying the tooltip class on HTML elements. It specifies the placement location using the HTML5 data attribute, and the title attribute is used to specify the text to be displayed inside the tooltip.

Example:
<div class="tooltip-buttons"> 
  <div class="tip" data-placement="top" title="Tooltip showing in the top position.">Top</div>
  <div class="tip" data-placement="right">Right</div>
  <div class="tip" data-placement="bottom">Bottom</div>
  <div class="tip" data-placement="left" title="Tooltip showing in the left position.">Left</div>
</div>

To set a specific tooltip position, you must use the data-placement attribute. By default, it will appear above the HTML element.

jQuery Script to Call and Enable Tooltips

To use tooltips, it is necessary that it must be initialized with jQuery. The following jQuery script triggers tooltips without specifying any argument options:

Example:
<script>
$(document).ready(function(){
  $('.tip').tooltip(); 
});
</script>

The following jQuery code shows how to trigger a tooltip with specified options:

Example:
<script>
$(document).ready(function(){
  $('.tip').tooltip({
    delay:{ "show": 600, "hide": 100 },
    title:"<strong>This title is from JavaScript.</strong> It is defined as a tooltip option.",
    html:true,
}); 
});
</script>

Here in the above code, delay, title, and html options have been used. If the HTML element title is not defined, the defined title will be used. The defined title option includes HTML tags that are allowed in the tooltip if the option 'html' is set as true.

Tooltip Options

The following table shows all the options that can be used with the tooltip:

OptionDescriptionDefault Value
animationThis option is used to add fade-in and fade-out effects to the popup.true
containerThis option specifies the HTML element name within which tooltip markup must be created dynamically to avoid overflow.false
delayThis option specifies the time in milliseconds for the duration of the animation.0
htmlThis option allows the use of HTML code in the tooltip.true
placementThis option is for defining the tooltip position. The options are: up, right, down, and left.top
templateThis option defines an HTML template for a tooltip message. The title text will be included inside the div tag containing the 'tooltip-inner' class.
<div class="tooltip" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner"></div>
</div>
titleThis option accepts content to be added to the tooltip popup.Text or HTML
triggerThis option accepts multiple trigger events like hover, focus, and manually used to trigger the tooltip.'hover focus'

Scroll Back to Top