Bootstrap Tooltips: Javascript Plugin

The Bootstrap tooltip plugin is a Javascript-powered feature that adds interactive tooltips to elements on your web page. These tooltips provide helpful contextual information to users, enhancing the user experience.

This plugin is highly customizable, allowing you to control its appearance, behavior, and trigger events with Javascript and data attributes.

Key Things to Know

• Bootstrap tooltips rely on the third-party library Popper.js for positioning. Ensure Popper.js is included before Bootstrap.js in your HTML for tooltips to work.
• Tooltips are opt-in for performance reasons. You must initialize them yourself using Javascript.
• Tooltips with zero-length titles will not be displayed.
• To avoid rendering issues in complex components like input groups, button groups, etc., specify container: 'body'.
• Tooltips will not work on hidden elements. Ensure your element is visible before attempting to trigger a tooltip.
• For disabled elements, trigger tooltips on a wrapper element.
• Tooltips for hyperlinks spanning multiple lines will be centered by default. Use white-space: nowrap; on the link to prevent this behavior.
• Ensure tooltips are hidden before their corresponding elements are removed from the DOM.
• Tooltips can be triggered from elements within a shadow DOM.

Initializing Tooltips

One method to initialize all tooltips on a page is to select them by their data-bs-toggle attribute.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Examples

Here are some examples of how to use tooltips in Bootstrap.

Basic Usage

Simply add the data-bs-toggle="tooltip" and title attribute to the element you want to have a tooltip.

<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Tooltip Placement

You can control the placement of the tooltip using the data-bs-placement attribute.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

Tooltip with HTML

You can use HTML within the tooltip by setting the data-bs-html attribute to true.

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

Tooltip with SVG

You can include SVGs within your tooltips.

Javascript API

The Bootstrap tooltip plugin provides a Javascript API to further control tooltips.

Javascript Options

The tooltip plugin provides several options to customize its behavior:

Option	Type	Default	Description
animation	boolean	true	Apply a CSS fade transition to the tooltip.
container	string | element | false	false	Appends the tooltip to a specific element. Useful for positioning within the document flow.
delay	number | object	0	Delay showing and hiding the tooltip (ms).
html	boolean	false	Allow HTML in the tooltip's title.
placement	string | function	'top'	How to position the tooltip (e.g., top, bottom, left, right).
selector	string | false	false	Delegate tooltip objects to specified targets, useful for dynamically added elements.
template	string	'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'	Base HTML structure for the tooltip.
title	string | element | function	''	Default tooltip title.
trigger	string	'hover focus'	How to trigger the tooltip (e.g., click, hover, focus, manual).
fallbackPlacements	array	['top', 'right', 'bottom', 'left']	Define fallback placements for the tooltip.
boundary	string | element	'clippingParents'	Overflow constraint boundary for the tooltip.
customClass	string | function	''	Add custom CSS classes to the tooltip.
sanitize	boolean	true	Enable or disable sanitization for security.
allowList	object	Default value	Object containing allowed attributes and tags for sanitization.
sanitizeFn	null | function	null	Custom sanitize function for advanced control.
offset	array | string | function	[0, 0]	Offset of the tooltip relative to its target.
popperConfig	null | object | function	null	Modify Bootstrap's default Popper.js configuration.

Javascript Methods

The tooltip plugin provides several Javascript methods to manipulate tooltips:

Method	Description
show()	Reveals the tooltip.
hide()	Hides the tooltip.
toggle()	Toggles the visibility of the tooltip.
dispose()	Hides and destroys the tooltip.
enable()	Enables the tooltip.
disable()	Disables the tooltip.
toggleEnabled()	Toggles the tooltip's enabled state.
update()	Updates the position of the tooltip.
getInstance(element)	Gets the tooltip instance associated with a DOM element.
getOrCreateInstance(element)	Gets the tooltip instance or creates a new one if it doesn't exist.

Javascript Events

The tooltip plugin emits Javascript events that allow you to react to tooltip actions:

Event	Description
show.bs.tooltip	Fires when the show method is called.
shown.bs.tooltip	Fires when the tooltip has become visible.
hide.bs.tooltip	Fires when the hide method is called.
hidden.bs.tooltip	Fires when the tooltip has become hidden.
inserted.bs.tooltip	Fires after the show.bs.tooltip event when the tooltip template is added to the DOM.

Accessibility

It is important to consider accessibility when using tooltips. Only add tooltips to elements that are traditionally keyboard-focusable and interactive, like links or form controls. Avoid using tabindex="0" on non-interactive elements as this can create confusing tab stops for keyboard users.

Don't rely solely on hover as the tooltip trigger. Provide alternative methods for keyboard users to access the same information.

Conclusion

Bootstrap's tooltip plugin is a versatile tool for providing users with helpful contextual information. By using Javascript and data attributes, you can customize the tooltips to match your design and user experience goals.

Remember to consider accessibility to ensure your tooltips are usable for all users.