Components · Tooltip · Use

Tooltip

Tooltip text and placement are contextual application content; this recipe currently implements the plain tooltip.

Markup

<script lang="ts">
	import { Tooltip } from '@ark-ui/svelte';
</script>

<Tooltip.Root openDelay={100} closeDelay={100}>
	<Tooltip.Trigger class="button-root button-outlined">Hover or focus</Tooltip.Trigger>
	<Tooltip.Positioner>
		<Tooltip.Content class="tooltip-content">Copy component token</Tooltip.Content>
	</Tooltip.Positioner>
</Tooltip.Root>