StellarUI

<stellar-tooltip>

anchored tooltip for brief non-interactive help text on focusable controls.

Properties

Component

Example

Preview

I'm a tooltip

Markup

Copy

<button
  id="tooltip-demo-anchor"
  type="button"
>
  Hover or focus me
</button>
<stellar-tooltip for="tooltip-demo-anchor">I'm a tooltip</stellar-tooltip>

API

Complete props, events, slots, and implementation notes for the shipped tooltip.

Props

Prop	Type	Default
`for`	`string`	`''`
`open`	`boolean`	`false`
`placement`	`auto \| top \| top-start \| top-end \| bottom \| bottom-start \| bottom-end \| right \| right-start \| right-end \| left \| left-start \| left-end`	`auto`
`open-delay`	`number`	`50`
`close-delay`	`number`	`100`
`manual`	`boolean`	`false`
`without-arrow`	`boolean`	`false`

Events

Event	Source	Notes
`before-open`	`stellar-tooltip`	Cancelable event emitted right before the tooltip opens.
`open`	`stellar-tooltip`	Emitted after the tooltip opens.
`before-close`	`stellar-tooltip`	Cancelable event emitted right before the tooltip closes.
`close`	`stellar-tooltip`	Emitted after the tooltip closes.

Slots

Slot	Notes
default	Tooltip body content. Keep it non-interactive so the component stays a tooltip instead of drifting into popover behavior.

Notes

The public tag is `stellar-tooltip`, anchored to another focusable element by its `for` id.
The docs preview keeps that anchor id stable on purpose. `for` is a real prop, but live-changing it makes the preview race the anchor update instead of demonstrating tooltip behavior.
The default behavior is automatic hover and focus opening: pointer up and blur close it, only one non-manual tooltip stays open at a time, and `placement` defaults to `auto`. The gap and cross-axis nudging props were intentionally removed to keep the API small.
Use the boolean `manual` prop when another component or app state owns visibility through the `open` prop.
Tooltip content is authored children, not a `label` prop, so docs keep the anchor text and tooltip text in `Example Properties` instead of pretending they are element props.
Do not put interactive controls inside the tooltip. The component follows tooltip semantics, not popover or dialog semantics.