Tooltip

Use tooltips when controls need short hints on hover or keyboard focus.

Use tooltips for nice-to-have context, not for required instructions or error messages. Icon-only controls should still have a proper name for assistive technology; a tooltip alone is not enough. Remember that touch users may not rely on hover the same way as mouse users. There is no dedicated tooltip page component in AEM; teams add them with Bootstrap where needed.

Example initialisation (developers) 

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

(Adapt to project ES5 rules if this lives in a legacy file.)

When to use

  • Abbreviations or non-essential clarification on hover-capable devices.
  • Dense admin UIs (rare on public pages).

When not to use

  • Required field labels or error text.
  • Mobile-first primary content (tooltips are weak on touch).

Guidelines

Do

  • Keep tooltip text short.
  • Provide tap alternatives on touch (long-press is not universal; prefer visible help).

Don't

  • Don't put long policy text in tooltips.