Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

Overview

Things to know when using the tooltip plugin:

• Tooltips rely on the 3rd party library Popper for positioning. You must include popper.min.js before bootstrap.js or use 
  bootstrap.bundle.min.js
   / 
  bootstrap.bundle.js
   which contains Popper in order for tooltips to work!

• Tooltips are opt-in for performance reasons, so you must initialize them yourself.

• Tooltips with zero-length titles are never displayed.

• Specify 
  container: 'body'
   to avoid rendering problems in more complex components (like our input groups, button groups, etc).

• Triggering tooltips on hidden elements will not work.

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

• When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use 
  white-space: nowrap;
   on your 
  <a>
  s to avoid this behavior.

• Tooltips must be hidden before their corresponding elements have been removed from the DOM.

• Tooltips can be triggered thanks to an element inside a shadow DOM.
  
  visit Bootstrap official site for tooltips examples Tooltips Example