Tooltip

Preview

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>

Installation

pnpm add fancy-ui-svelte

import { Tooltip } from 'fancy-ui-svelte'

Usage

svelte

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

<Tooltip />

Examples

Basic Usage

A heart IconButton with a tooltip, matching the mockup.

svelte

<script lang="ts">
	import { Tooltip } from "$lib/fancy-ui/tooltip";
	import { IconButton } from "$lib/fancy-ui/icon-button";

	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 "$lib/fancy-ui/tooltip";

	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 "$lib/fancy-ui/tooltip";
</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>

Props

Prop	Type	Default	Description
`content` *	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