Tooltip

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

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

Sibling (10)

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

<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

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

<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

Root

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

RootProvider

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

RootContext

Property	Default	Type
`children`	-	Snippet<[() => TooltipApi<PropTypes>]>

Trigger

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

Positioner

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

Content

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

Arrow

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

ArrowTip

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

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Arrow

Z-Index

Programmatic Control

Direction

Headless

API Reference

Root

RootProvider

RootContext

Trigger

Positioner

Content

Arrow

ArrowTip