Tooltip | getdom.studio

Playground

Try every prop live

Tooltip playground

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

Playground.vuevue

vue

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

const data = reactive({
	  "for": "",
	  "text": "Tooltip text",
	  "placement": "top",
	  "delay": 120,
	  "offset": 6,
	  "collisionPadding": 8,
	  "floatingMode": "viewport"
	});
</script>

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

Demo

Live preview

Vue directive

Add presentation without a wrapper

Import vDomTooltip and use v-dom-tooltip on a native element or a Vue component with one HTML root. Pass the tooltip text and append .top, .right, .bottom, or .left to set its placement. The object form remains available for dynamic placement and other options.

Attach the tooltip directly to its trigger without adding a wrapper element.

Directive.vuevue

vue

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

const tooltip = 'No wrapper element is added';
</script>

<template>
	<DomButton
		v-dom-tooltip.right="tooltip"
		variant="secondary"
	>
		Directive target
	</DomButton>
</template>

Explicit target

Reference an element by id

Use for when the tooltip should be declared separately from its trigger. The tooltip host registers only that element and does not scan or observe the document.

Declare the tooltip separately and connect it to one element by id.

ExplicitTarget.vuevue

vue

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

<template>
	<DomButton id="save-button" variant="secondary">
		Save
	</DomButton>
	<DomTooltip
		for="save-button"
		text="Save your changes"
		placement="top"
	/>
</template>

Usage

Web component

html

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

Props

Name	Type	Default	Description
for	string	''	ID of an existing trigger. Leave empty to wrap the trigger in the default slot.
text	string	—	Tooltip content.
placement	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Position relative to the trigger.
delay	number	120	Show delay in ms.
offset	number	6	Gap in pixels between trigger and tooltip.
collisionPadding	number	8	Viewport padding used when the tooltip flips or shifts.
floatingMode	'viewport' \| 'anchor'	'viewport'	Shared floating positioning mode.