v133 · dom

popover=hint

The Popover API (https://chromestatus.com/feature/5463833265045504) specifies the behavior for two values of the `popover` attribute: `auto` and `manual`. This feature describes a third value, `popover=hint`. Hints, which are most often associated with "tooltip" type behaviors, have slightly different behaviors. Primarily, the difference is that `hint`s are

concepts

  1. popover=hint

    popover=hint — tooltip-style popovers with a separate stacking lane that doesn't close auto popovers.

  2. Menu coexistence

    An open menu with a help button that shows a hint tooltip on hover. The hint does not close the menu — the reason hint got its own stacking lane.

  3. Stack explorer

    Live read of the two parallel top-layer stacks (auto and hint) as you open and close menus and tooltips. The lanes are independent.

  4. Hover pattern guide

    All three tooltip trigger patterns — hover, focus, and click-toggle — built with popover=hint, plus a side-by-side showing hint and auto popover open at the same time without interfering.

  5. Glossary document

    A CSS architecture article where technical terms are dotted-underlined. Hover any term to see its definition as a popover=hint. Multiple definitions can be open simultaneously — hints have a separate stacking lane from auto popovers so they never close each other.

why it shipped

One common use case, "Hints" or "Tooltips" was not covered by the original Popover API proposal. This use case was originally included in the prototype, but because some technical issues couldn't be worked out in time, this part of the feature was removed from the initial shipping feature. This intent adds back support for Hints/Tooltips.

references