Upgrade a CSS tooltip with the behavior the platform can't express in styles alone. The baseline needs no JavaScript: the stylesheet reveals the tip on the trigger's :hover/:focus-visible and places it with CSS anchor positioning. When this enhancer runs, it wires role="tooltip" and aria-describedby, promotes the tip to a popover="manual" so it renders in the top layer above any clipping ancestor (falling back to hidden on engines without the Popover API), then takes over visibility (marking the trigger data-hl-tooltip-managed) so it can add show/hide delays, a grace period for crossing onto the tip, Escape-to-dismiss from anywhere while the tip is shown, and a JS positioning fallback kept in sync on scroll and resize. The chosen side is stamped on the tip as data-hl-side so the stylesheet can pick the matching position-area. Visibility is observable through onOpenChange/hl:open-change and controllable through the returned API. Markup can set data-hl-placement, data-hl-show-delay, data-hl-hide-delay, and data-hl-default-open on the trigger.

Properties

Properties