Component

<dom-tooltip>

custom element

Lightweight tooltip wired through aria-describedby. Wrap a trigger or reference one by id with for.

Demo

Hover tooltip

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

html

<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>

Explicit target

Reference a trigger by id

Set for to an existing element id when the tooltip should register without wrapping its trigger.

for.htmlhtml

html

<button
	id="headless-save-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
	for="headless-save-button"
	text="Save your changes"
	placement="top"
	delay="120"
></dom-tooltip>

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

Usage

Plain HTML

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 when for is not set.

Attributes

Name	Type	Description
for	string	ID of an existing trigger element. This avoids adding a wrapper around the trigger.
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).
offset	number	Gap in pixels between trigger and tooltip (default 6).
collision-padding	number	Viewport padding used when flipping or shifting the tooltip (default 8).
floating-mode	'viewport' \| 'anchor'	viewport keeps the tooltip inside the browser; anchor keeps it attached while scrolling.
flip	boolean	Allow the tooltip to flip to the opposite side when it would collide with the viewport.

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

Focus triggerShows the tooltip.
Blur triggerHides the tooltip.

Hover tooltip

Reference a trigger by id

Plain HTML

Slots

Attributes

Events

Keyboard

See also