Bootstrap - Tooltips

Quiz

This chapter will discuss about adding custom Bootstrap tooltips. Tooltip is typically displayed as a small, floating box that appears when the user hovers over or clicks on a specific UI element, such as a button, icon, or hyperlink.

Tooltips are used to provide context, explanations, or instructions for users who may need more information about the purpose or functionality of a UI element.

Things to remember while using the tooltip plug-in:

As tooltips depend on Popper, a third party library, for positioning, you must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js, which contains Popper for tooltips to work.

You must initialize the tooltips first, as tooltips are opt-in for performance reasons.

A tooltip will never be shown for a zero-length title value.

Triggering tooltips will not work on hidden elements.

Tooltips for .disabled or disabled elements must be triggered using a wrapper element.

To avoid getting tooltips centered, use white-space: nowrap; on the <a> element.

Before removing any element from the DOM, you must hide the tooltips corresponding to them.

Inside a shadow DOM, tooltips can be triggered thanks to an element.

Enable Tooltips

Initialize all the tooltips on a page, by their data-bs-toggle attribute

  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Creating a Tooltip

Add the data-bs-toggle="tooltip" attribute to an element, to create a tooltip.

The data-bs-toggle attribute defines the tooltip.
The title attribute defines the text to be displayed inside the tooltip.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Bootstrap tooltip creation</h4>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
      
      <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>
  </body>
</html>

Tooltips on Links

Tooltips can be added to links as well using the attribute data-bs-toggle. Let's see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip on link</h4>
    <p class="muted">The  <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Feel free to use either title or data-bs-title in your HTML. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.

Custom tooltips

Bootstrap provides a custom class data-bs-custom-class="custom tooltip" to customize the tooltip. Let's see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Custom Tooltip</h4>
    <button type="button" class="btn btn-primary"
          data-bs-toggle="tooltip" data-bs-placement="right"
          data-bs-custom-class="custom-tooltip"
          data-bs-title="Tooltip is created as custom tooltip.">
          Custom tooltip
  </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Positioning of a Tooltip

There are four options available for the positioning of the tooltip: left, right, top and bottom aligned.

By default, the tooltip will appear on top of the element.

The data-bs-placement attribute is used to set the position of the tooltip.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example tooltip-demo">
    <h4>Tooltip example - Position</h4>
    <button type="button"   class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"    data-bs-title="Top Tooltip">
    Top Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"  data-bs-title="Right Tooltip">
    Right Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip">
    Bottom Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"   data-bs-title="Left Tooltip">
    Left Tooltip
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Tooltip with custom HTML

The example given below shows a tooltip with custom HTML added.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap tooltip creation with HTML</h4>
    
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
      Tooltip with HTML
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Markup

For a tooltip on any HTML element, the required markup for the tooltip is only a data attribute and title.

The markup of a tooltip that is generated is simple and is set to top, be default.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap tooltip markup</h4>
    
    <!-- HTML to write -->
    <a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a>
    <!-- Generated markup by the plugin -->
    <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Markup for a tooltip
    </div>
    </div>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Tooltip on disabled elements

The users can not focus, hover or click on the elements with disabled attribute, to trigger a tooltip. Thus, in order to trigger a tooltip, use the wrapper <div> or <span>.

Use tabindex="0" to make it keyboard-focusable.

Example

Here is an example of tooltip on disabled element:

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip on Disabled Element</h4>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled">
      <button class="btn btn-secondary" type="button" disabled>Button Disabled</button>
    </span>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Options

An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".

Example

Here is an example of options added as an attribute to .data-bs- class:

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips - Options</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip options</h4>
    <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip"  data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
    
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

The table given below shows the various options provided by Bootstrap, to be appended to the class .data-bs- as a data attribute.

Name	Type	Default	Description
allowList	object	default value	Object that contains allowed attributes and tags.
animation	boolean	true	A CSS fade transition is applied to the tooltip.
boundary	string, element	'clippingParents'	By default, its 'clippingParents' and can accept an HTML Element reference (via JavaScript only).
container	string, element, false	false	Appends the tooltip to a specific element.
customClass	string, function	''	These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
delay	number, object	0	Delay showing and hiding the tooltip (ms). Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacements	array	['top', 'right', 'bottom', 'left']	Define fallback placements by providing a list of placements in array.
html	boolean	false	Allow HTML in the tooltip.
offset	array, string, function	[0, 0]	Offset of the tooltip relative to its target. Ex: data-bs-offset="10,20".
placement	string, function	'top'	Decides the position of the tooltip.
popperConfig	null, object, function	null	To change Bootstraps default Popper config.
sanitize	boolean	true	Enable or disable the sanitization.
sanitizeFn	null, function	null	You can supply your own sanitize function.
selector	string, false	false	With a selector, tooltip objects will be delegated to the specified targets.
template	string	''	While creating a tooltip, use the base HTML.
title	string, element, function	''	It refers to the title of the tooltip.
trigger	string	'hover-focus'	Shows how the tooltip is triggered: click, hover, focus, manual.

Print Page