Component

Popover hint

Published on

Description

A popover hint is a Popover with popover="hint". Opening a hint closes other hints but leaves open auto popovers alone, so a hint can explain a control inside a menu without dismissing the menu.

Browsers without hint support treat it as manual, so the content still opens and closes with its trigger.

Example

Open in new tab
View HTML markup 
<button type="button" popovertarget="popover-hint-demo">Toggle hint</button>
<div id="popover-hint-demo" popover="hint">
  <p>Hints close other hints but leave open auto popovers in place.</p>
</div>

Accessibility

  • Open it with a <button popovertarget> so the trigger is keyboard operable and exposes its expanded state.
  • Where hint is supported, Escape and clicking outside close it; elsewhere the trigger toggles it.
  • Keep hint content short and non-interactive.

References

  • Popover — the default auto popover
  • Tooltip — for a short label on hover or focus

Variables

  • id — referenced by the trigger in popovertarget
  • children — the hint content