Bootstrap – Tooltips


Bootstrap – Tooltips



”;


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.