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 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.



  
    Bootstrap Tooltips
    
    
    
    
    
  
  
      Bootstrap tooltip creation

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.

Bootstrap Tooltip

Tooltip on link

The tooltip is used for displaying some extra information about any content. This can be added to a link.

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.



  
    Bootstrap Tooltip
    
    
    
    
    
  
  
    Custom Tooltip

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.



  
    Bootstrap - Tooltip
    
    
    
    
    
    
  
  
    Tooltip example - Position

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.



  
    Bootstrap Tooltips
    
    
    
    
    
  
  
    Bootstrap tooltip creation with 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.



  
    Bootstrap Tooltips
    
    
    
    
    
  
  
    Bootstrap tooltip markup
    
    
    Hover over me for markup
    
    
    
    
        Markup for a tooltip

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

or .

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.



  
    Bootstrap Tooltips
    
    
    
    
    
  
  
    Tooltip on Disabled Element

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.



  
    Bootstrap Tooltips - Options
    
    
    
    
    
  
  
    Tooltip options

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