Tips & Tricks

Color and Background

Overview 

Things to know when using the tooltip plugin:

  • Tooltips rely on the third party library Popper for positioning. You must include popper.min.js before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
  • 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.

Got all that? Great, let’s see how they work with some examples.

JO
John
CHADA team

Build on tools you can trust

Browse the CHADA catalogue — premium WordPress plugins with honest licensing.

Browse plugins