# Tooltip

> A small anchored label that explains a control on hover or focus — plain text only, never interactive content.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Overlays
- Tags: overlay, tooltip, anchored, accessibility
- Docs: https://fancy-ui.rama.app/docs/components/tooltip
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/tooltip

## Import

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

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Tooltip } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` (required) | `string` | — | The tooltip's text |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Side of the trigger to place the tooltip on |
| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment along the trigger's cross axis |
| `offset` | `number` | `6` | Gap in pixels between the trigger and the tooltip |
| `openDelay` | `number` | `500` | Delay in ms before a hover opens it. Never applied to a focus open |
| `closeDelay` | `number` | `0` | Delay in ms before it closes once neither hovered nor focused |
| `disabled` | `boolean` | `false` | Suppresses it entirely — no open on hover or focus |
| `class` | `string` | — | Additional CSS classes, merged onto the trigger wrapper |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the trigger wrapper element |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The trigger. Must render exactly one focusable element — a button, link, or similar |

## Examples

### Basic Usage

A heart IconButton with a tooltip, matching the mockup.

```svelte
<script lang="ts">
	import { Tooltip } from "fancy-ui-svelte";
	import { IconButton } from "fancy-ui-svelte";

	let liked = $state(false);
</script>

<Tooltip content={liked ? "Remove from favorites" : "Add to favorites"}>
	<IconButton
		label={liked ? "Remove from favorites" : "Add to favorites"}
		variant="outline"
		onclick={() => (liked = !liked)}
	>
		<svg
			class="size-4"
			viewBox="0 0 24 24"
			fill={liked ? "currentColor" : "none"}
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
			aria-hidden="true"
		>
			<path
				d="M12 20s-7-4.35-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 5c-2.5 4.65-9.5 9-9.5 9Z"
			/>
		</svg>
	</IconButton>
</Tooltip>
```

### Sides

The tooltip placed on each of the four sides.

```svelte
<script lang="ts">
	import { Tooltip } from "fancy-ui-svelte";

	const sides = ["top", "right", "bottom", "left"] as const;
</script>

<div class="flex flex-wrap items-center gap-8">
	{#each sides as side (side)}
		<Tooltip content={`Placed on ${side}`} {side}>
			<button
				class="border-border text-foreground rounded-[8px] border px-[14px] py-[7px] text-[12px] font-medium"
			>
				{side}
			</button>
		</Tooltip>
	{/each}
</div>
```

### Delays

openDelay and closeDelay tuned away from their defaults.

```svelte
<script lang="ts">
	import { Tooltip } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap items-center gap-8">
	<Tooltip content="Opens instantly" openDelay={0}>
		<button
			class="border-border text-foreground rounded-[8px] border px-[14px] py-[7px] text-[12px] font-medium"
		>
			No delay
		</button>
	</Tooltip>

	<Tooltip content="Waits a second before showing" openDelay={1000}>
		<button
			class="border-border text-foreground rounded-[8px] border px-[14px] py-[7px] text-[12px] font-medium"
		>
			1s open delay
		</button>
	</Tooltip>

	<Tooltip content="Lingers for a second after you leave" closeDelay={1000}>
		<button
			class="border-border text-foreground rounded-[8px] border px-[14px] py-[7px] text-[12px] font-medium"
		>
			1s close delay
		</button>
	</Tooltip>
</div>
```