# Tooltip

A floating label that appears on hover or focus, providing additional context.

```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.

```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

By default we do 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 part.

```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>

```

## Programmatic Control

This is made possible via the Provider Pattern.

```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

```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>

```

## Headless

Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling.

```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>

```

The benefits are as follows:

* You can make the `Trigger` surround any element, including an icon, button, image, etc.
* You can modify the entire structure within `Content`, including custom markup and styling.
* You may place the `CloseTrigger` anywhere, and use it as an X close option.

## API Reference

### TooltipRootProps

| Property            | Default | Type                                                                                             | Description                                                                                                                     |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| 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.&#xA;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.&#xA;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.                                                                   |

### TooltipRootProviderProps

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

### TooltipRootContextProps

| Property | Default | Type                                      | Description |
| -------- | ------- | ----------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => TooltipApi\<PropTypes>]> | -           |

### TooltipTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### TooltipPositionerProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TooltipContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TooltipArrowProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### TooltipArrowTipProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |