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 p-2 preset-filled-surface-950-50">
						<span>Hello Skeleton</span>
						<Tooltip.Arrow
							style={{
								['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
								['--arrow-background' as string]: 'var(--color-surface-950-50)',
							}}
						>
							<Tooltip.ArrowTip />
						</Tooltip.Arrow>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

svelte

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

<Tooltip positioning={{ placement: 'top' }}>
	<Tooltip.Trigger>Hover</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card p-2 preset-filled-surface-950-50">
				<span>Hello Skeleton</span>
				<Tooltip.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-950-50);">
					<Tooltip.ArrowTip />
				</Tooltip.Arrow>
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>

Breaking convention in Skeleton, this component is provided “headless”. Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.

Arrow

Visually connects the popover content to the trigger element. Will automatically align based on the selected side.

tsx

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

export default function Arrow() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card bg-surface-100-900 p-2  shadow-xl">
						<span>Hello Skeleton</span>
						<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</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card bg-surface-100-900 p-2  shadow-xl">
				<span>Hello Skeleton</span>
				<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

By default Skeleton does not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the Positioner component.

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 bg-surface-100-900 p-2  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 bg-surface-100-900 p-2  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 bg-surface-100-900 p-2  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 bg-surface-100-900 p-2  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>

Provider Pattern

Use the Provider Pattern to gain access to the inner component APIs.

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 bg-surface-100-900 p-2  shadow-xl">Hello Skeleton</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 bg-surface-100-900 p-2  shadow-xl">Hello Skeleton</Tooltip.Content>
			</Tooltip.Positioner>
		</Portal>
	</Tooltip.Provider>
</div>

Direction

Set the text direction (ltr or rtl) using the dir prop.

tsx

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

export default function Dir() {
	return (
		<Tooltip dir="rtl">
			<Tooltip.Trigger>Hover</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card bg-surface-100-900 p-2  shadow-xl">Hello Skeleton</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

svelte

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

<Tooltip dir="rtl">
	<Tooltip.Trigger>Hover</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card bg-surface-100-900 p-2  shadow-xl">Hello Skeleton</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