Tooltip

A floating label that appears on hover or focus.

<script lang="ts">
  import * as Tooltip from "$lib/components/ui/tooltip";
  import { Button } from "$lib/components/ui/button";
</script>
 
<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>
      {#snippet child({ props })}
        <Button variant="ghost" {...props}>Hover me</Button>
      {/snippet}
    </Tooltip.Trigger>
    <Tooltip.Content>Add to library</Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

Installation

npx lily-svelte@latest add tooltip

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the tooltip source from the registry into `$lib/components/ui/tooltip`.

Usage

Wrap your app (or the relevant subtree) in Tooltip.Provider, then pair a Tooltip.Trigger with Tooltip.Content.

<script lang="ts">
	import * as Tooltip from '$lib/components/ui/tooltip';
</script>
 
<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger>Hover me</Tooltip.Trigger>
		<Tooltip.Content>Add to library</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>

With a Button trigger

Use the child snippet to render your own element (like a Button) as the trigger. Spread props so the tooltip wiring is preserved.

<script lang="ts">
	import * as Tooltip from '$lib/components/ui/tooltip';
	import { Button } from '$lib/components/ui/button';
</script>
 
<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger>
			{#snippet child({ props })}
				<Button variant="ghost" {...props}>Hover me</Button>
			{/snippet}
		</Tooltip.Trigger>
		<Tooltip.Content>Add to library</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>