Component

Tooltip

<dom-tooltip>

Lightweight, accessible tooltip wired through aria-describedby — fires on hover and focus.

Playground

Try every prop live

Tooltip playground

Edit props in the inspector — hover or focus the trigger to preview placement and delay.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomTooltip } from '@getdom/studio/vue';

const data = reactive({
	  "text": "Tooltip text",
	  "placement": "top",
	  "delay": 120
	});
</script>

<template>
	<DomTooltip
		v-bind="data"
	/>
</template>

Demo

Live preview

Usage

Vue

<script setup>
import { DomTooltip, DomButton } from '@getdom/studio/vue';
</script>

<template>
  <DomTooltip text="Sync now (⌘+S)" placement="top">
    <DomButton variant="secondary">Save</DomButton>
  </DomTooltip>
</template>

Usage

Web component

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

Props

Name	Type	Default	Description
text	string	—	Tooltip content.
placement	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Position relative to the trigger.
delay	number	120	Show delay in ms.