Component

<dom-tooltip>

custom element

Lightweight tooltip wired through aria-describedby. The bubble appears on hover and focus, and is injected as a sibling element.

Demo

Hover tooltip

Wrap any focusable child — text and placement are attributes on the host.

basic.htmlhtml

<dom-tooltip text="Save your changes" placement="top" delay="120">
	<button
		type="button"
		class="inline-flex h-10 items-center rounded-full bg-primary px-4 text-sm font-medium text-primary-fg hover:opacity-90"
	>
		Save
	</button>
</dom-tooltip>

<script type="module">
	import '@getdom/studio/headless/tooltip.js';
</script>

Usage

Plain HTML

<dom-tooltip text="Save your changes" placement="top" delay="120">
  <button>Save</button>
</dom-tooltip>

Slots

Name	Scope	Description
#(default)	—	The trigger — any focusable element wrapped by the tooltip.

Attributes

Name	Type	Description
text	string	Tooltip body. Keep it short.
placement	'top' \| 'bottom' \| 'left' \| 'right'	Position relative to the trigger.
delay	number	Open delay in milliseconds (default 120).

From dom-tooltip.__doc.attributes.

Events

Name	Payload	Description
dom:show	—	Fired when the tooltip becomes visible.
dom:hide	—	Fired when the tooltip is dismissed.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Keyboard