This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-tooltip> is a hover/focus tooltip on the same positioning primitives as <neo-popover> with tooltip semantics: no focus stealing, no click dismissal, pointer-events: none, role="tooltip", and aria-describedby on the trigger. The first non-content child is the trigger. The text attribute is the shorthand body; pass a child carrying [data-neo-tooltip-content] instead to render rich markup.
Not visible on touch
Tooltips trigger on hover and keyboard focus; touch devices have neither, so a tap never reveals one. Never put essential information only in a tooltip; keep it available inline for touch and assistive technology users.
Default
Placements
Shorthand body
Rich content
Delays
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect, so the live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
Hover me
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
Twelve combinations: each side (top, right, bottom, left) paired with optional -start or -end alignment. Bare side names center the panel on that edge; bottom-start is the initial value.
Drop a child carrying [data-neo-tooltip-content] to render arbitrary markup as the body. The text attribute is ignored once that slot is present, so the slot wins on collisions.
Hover me (rich)Heads up: this action notifies everyone in the channel.@evelyn
hover-open-delay is the hover dwell (ms) the host waits before showing the tooltip; hover-close-delay is how long it lingers after the pointer leaves. Defaults are 350 and 0. Focus shows the tooltip immediately; the delays are hover-only.
