popover & tooltip

Example

Anchored panelLight dismiss, Esc, toggling: all the browser. Anchored to the invoker where anchor positioning exists.

Basic usage

<button popovertarget="menu">Menu</button>

<div id="menu" popover class="menu">
  <button popovertarget="menu" popovertargetaction="hide">Edit</button>
  <button popovertarget="menu" popovertargetaction="hide">Duplicate</button>
  <hr />
  <button data-variant="danger" popovertarget="menu" popovertargetaction="hide">Delete</button>
</div>

<button data-tip="Saved" aria-label="Saved">Hover me</button>

API

Attributes

Name	Type	Default	Description
`popover`	native attribute	`auto`	Makes an element a native popover.
`popovertarget`	element ID	—	Connects an invoker button to a popover.
`popovertargetaction`	`toggle \| show \| hide`	`toggle`	Chooses the invoker action. Menu items use `hide` to close declaratively.
`class="menu"`	class	—	Applies menu layout to a popover of buttons or links.
`data-tip`	string	—	Adds a CSS-only visual tooltip.

Content/markup contract

Part	Contract	Default	Description
Panel	element with `id` and `popover`	required	Contains arbitrary panel content.
Menu items	buttons or links	—	Use ordinary controls; separators are plain `hr` elements.
Tooltip label	`aria-label` or visible text	required	`data-tip` itself is visual only.

Native methods

Name	Type	Default	Description
`showPopover()`	method	—	Shows the popover from application code.
`hidePopover()`	method	—	Hides the popover from application code.
`togglePopover()`	method	—	Toggles the popover from application code.

Accessibility

Tab, Esc, and light dismiss are native. Tooltips are visual, so pair data-tip with an accessible name or visible text. Menus currently use normal tab order; arrow-key roving is not provided.

Browser support

Where CSS anchor positioning is unavailable, popovers fall back to the user agent's centered position.