Tooltip · Skeleton

tsx

import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
						nesciunt enim.
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

svelte

<script lang="ts">
	import { Portal, Tooltip } from '@skeletonlabs/skeleton-svelte';
</script>

<Tooltip>
	<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl">
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa nesciunt
				enim.
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>

Arrow

You may optionally enable arrows via the Arrow and ArrowTip component parts. Note that Zag.js opts to style these with CSS custom properties, which can be adjusted using a style attribute.

tsx

import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Arrow() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
						nesciunt enim.
						<Tooltip.Arrow
							style={{
								['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
								['--arrow-background' as string]: 'var(--color-surface-100-900)',
							}}
						>
							<Tooltip.ArrowTip />
						</Tooltip.Arrow>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

svelte

<script lang="ts">
	import { Portal, Tooltip } from '@skeletonlabs/skeleton-svelte';
</script>

<Tooltip>
	<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl">
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa nesciunt
				enim.
				<Tooltip.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
					<Tooltip.ArrowTip />
				</Tooltip.Arrow>
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>

Z-Index

Sibling (10)

tsx

import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function ZIndex() {
	return (
		<div className="grid grid-cols-2 gap-4">
			<Tooltip>
				<Tooltip.Trigger>Default (auto)</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner>
						<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
							This example will be below the sibling.
						</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip>

			<Tooltip>
				<Tooltip.Trigger>Above (20)</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner className="z-20!">
						<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
							This example will be above the sibling.
						</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip>

			<div className="col-span-2 h-[100px] relative">
				<div className="rounded bg-primary-200-800/75 w-full h-full z-10 flex justify-center items-center absolute">Sibling (10)</div>
			</div>
		</div>
	);
}

Sibling (10)

svelte

<script lang="ts">
	import { Portal, Tooltip } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid grid-cols-2 gap-4">
	<Tooltip>
		<Tooltip.Trigger>Default (auto)</Tooltip.Trigger>
		<Portal>
			<Tooltip.Positioner>
				<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl">This example will be below the sibling.</Tooltip.Content>
			</Tooltip.Positioner>
		</Portal>
	</Tooltip>

	<Tooltip>
		<Tooltip.Trigger>Above (20)</Tooltip.Trigger>
		<Portal>
			<Tooltip.Positioner class="z-20!">
				<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl">This example will be above the sibling.</Tooltip.Content>
			</Tooltip.Positioner>
		</Portal>
	</Tooltip>

	<div class="col-span-2 h-[100px] relative">
		<div class="rounded bg-primary-200-800/75 w-full h-full z-10 flex justify-center items-center absolute">Sibling (10)</div>
	</div>
</div>

Headless

tsx

import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Headless() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl space-y-2">
						<img
							className="size-72"
							src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWVmbzcxanp6YmtxZ28xcXBqaXBscThsdDZ5Nm9ncWxkeWtqaHJ2bSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/dn1PN6NtunfnUjUGFC/giphy.gif"
							alt="Skeleton Gif"
						/>
						<p>Three spooky skeletons!</p>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

svelte

<script lang="ts">
	import { Portal, Tooltip } from '@skeletonlabs/skeleton-svelte';
</script>

<Tooltip>
	<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl space-y-2">
				<img
					class="size-72"
					src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWVmbzcxanp6YmtxZ28xcXBqaXBscThsdDZ5Nm9ncWxkeWtqaHJ2bSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/dn1PN6NtunfnUjUGFC/giphy.gif"
					alt="Skeleton Gif"
				/>
				<p>Three spooky skeletons!</p>
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>

Provider Pattern

Use the Provider Pattern to programmatically open and close the tooltip.

tsx

import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-react';

export default function Programmatic() {
	const tooltip = useTooltip();
	return (
		<div className="flex flex-col gap-4">
			<button className="btn preset-filled w-[150px]" onClick={() => tooltip.setOpen(!tooltip.open)}>
				Trigger
			</button>

			<Tooltip.Provider value={tooltip}>
				<Tooltip.Trigger>Anchor ({tooltip.open ? 'open' : 'closed'})</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner>
						<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip.Provider>
		</div>
	);
}

svelte

<script lang="ts">
	import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-svelte';

	const id = $props.id();
	const tooltip = useTooltip({ id });
</script>

<div class="grid gap-4">
	<button class="btn preset-filled w-[150px]" onclick={() => tooltip().setOpen(!tooltip().open)}>Trigger</button>
	<Tooltip.Provider value={tooltip}>
		<Tooltip.Trigger>Anchor ({tooltip().open ? 'open' : 'closed'})</Tooltip.Trigger>
		<Portal>
			<Tooltip.Positioner>
				<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl">
					Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
					nesciunt enim.
				</Tooltip.Content>
			</Tooltip.Positioner>
		</Portal>
	</Tooltip.Provider>
</div>

Direction

tsx

import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<Tooltip dir="rtl">
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
						nesciunt enim.
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

svelte

<script lang="ts">
	import { Portal, Tooltip } from '@skeletonlabs/skeleton-svelte';
</script>

<Tooltip dir="rtl">
	<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card max-w-md p-2 bg-surface-100-900 shadow-xl">
				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa nesciunt
				enim.
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>

API Reference

Root

Prop	Default	Type
`children`	—	ReactNode
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`aria-label`	—	string \| undefined Custom label for the tooltip.
`ids`	—	Partial<{ trigger: string; content: string; arrow: string; positioner: string; }> \| undefined The ids of the elements in the tooltip. Useful for composition.
`openDelay`	400	number \| undefined The open delay of the tooltip.
`closeDelay`	150	number \| undefined The close delay of the tooltip.
`closeOnPointerDown`	true	boolean \| undefined Whether to close the tooltip on pointerdown.
`closeOnEscape`	true	boolean \| undefined Whether to close the tooltip when the Escape key is pressed.
`closeOnScroll`	true	boolean \| undefined Whether the tooltip should close on scroll
`closeOnClick`	true	boolean \| undefined Whether the tooltip should close on click
`interactive`	false	boolean \| undefined Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
`onOpenChange`	—	((details: OpenChangeDetails) => void) \| undefined Function called when the tooltip is opened.
`positioning`	—	PositioningOptions \| undefined The user provided options used to position the popover content
`disabled`	—	boolean \| undefined Whether the tooltip is disabled
`open`	—	boolean \| undefined The controlled open state of the tooltip
`defaultOpen`	—	boolean \| undefined The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`getRootNode`	—	(() => Node \| ShadowRoot \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Provider

Prop	Default	Type
`value`	—	TooltipApi<PropTypes>
`children`	—	ReactNode

Context

Prop	Default	Type
`children`	—	(tooltip: TooltipApi<PropTypes>) => ReactNode

Trigger

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Positioner

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Content

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Arrow

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ArrowTip

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Root

Prop	Default	Type
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`aria-label`	—	string \| undefined Custom label for the tooltip.
`ids`	—	Partial<{ trigger: string; content: string; arrow: string; positioner: string; }> \| undefined The ids of the elements in the tooltip. Useful for composition.
`openDelay`	400	number \| undefined The open delay of the tooltip.
`closeDelay`	150	number \| undefined The close delay of the tooltip.
`closeOnPointerDown`	true	boolean \| undefined Whether to close the tooltip on pointerdown.
`closeOnEscape`	true	boolean \| undefined Whether to close the tooltip when the Escape key is pressed.
`closeOnScroll`	true	boolean \| undefined Whether the tooltip should close on scroll
`closeOnClick`	true	boolean \| undefined Whether the tooltip should close on click
`interactive`	false	boolean \| undefined Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
`onOpenChange`	—	((details: OpenChangeDetails) => void) \| undefined Function called when the tooltip is opened.
`positioning`	—	PositioningOptions \| undefined The user provided options used to position the popover content
`disabled`	—	boolean \| undefined Whether the tooltip is disabled
`open`	—	boolean \| undefined The controlled open state of the tooltip
`defaultOpen`	—	boolean \| undefined The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`getRootNode`	—	(() => Node \| ShadowRoot \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`children`	—	Snippet<[]> \| undefined The default slot content to be rendered within the component.

Provider

Prop	Default	Type
`value`	—	() => TooltipApi<PropTypes>
`children`	—	Snippet<[]> \| undefined The default slot content to be rendered within the component.

Context

Prop	Default	Type
`children`	—	Snippet<[() => TooltipApi<PropTypes>]>

Trigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Positioner

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Arrow

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ArrowTip

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself