Tooltips

Documentation and examples for adding boodoo tooltips — small, interactive popups that appear on hover or focus.

Overview

Tooltips display a small piece of information when the user hovers, focuses, or taps an element. boodoo's tooltips are dependency-free (no Popper), initialized from data-boodoo-toggle="tooltip", and support four placements plus keyboard accessibility via data-boodoo-trigger.

Heads up: Tooltips are disabled for disabled elements. If you need tooltips on disabled buttons, wrap them in a positioned parent and the tooltip goes on the wrapper.

Example: enable tooltips everywhere

A tooltip on a button, toggled on hover:

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

Markup

Put the title text in data-boodoo-title, or in the native title attribute. boodoo reads data-boodoo-title first, then title, and removes the native title so the browser's default tooltip doesn't clash.

Placements

Supported: top (default), bottom, start, end, plus auto which picks the best fit for the viewport, and corner variants like top-start for fine control.

Triggers

Use data-boodoo-trigger to choose the interaction: hover focus click manual

<!-- toggles on click -->
<button data-boodoo-toggle="tooltip" data-boodoo-trigger="click"
        data-boodoo-title="Click to show">Click</button>

Delay

Use data-boodoo-delay (ms) for show/hide delay:

<button data-boodoo-toggle="tooltip" data-boodoo-delay="250"
        data-boodoo-title="Delayed">Delayed tooltip</button>

JavaScript

const tip = boodoo.Tooltip.getOrCreateInstance(document.getElementById('myTip'), {
  placement: 'bottom',
  title: 'Custom title',
  delay: 150,
});
tip.show();