Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Loading preview…

Installation

Usage

Use tooltip for short contextual hints on hover/focus. Place Tooltip.Provider once in your root layout (or nest providers for different delay settings). Compose Root, Trigger, and Content.

1<script lang="ts">
2	import { buttonVariants } from '~/components/button';
3	import * as Tooltip from '~/components/tooltip';
4</script>
5
6<Tooltip.Provider>
7	<Tooltip.Root>
8		<Tooltip.Trigger class={buttonVariants({ variant: 'outline' })}>Hover</Tooltip.Trigger>
9		<Tooltip.Content>
10			<p>Add to library</p>
11		</Tooltip.Content>
12	</Tooltip.Root>
13</Tooltip.Provider>