Tooltip

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>
  );
}

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.

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>
  );
}

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)

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>
  );
}

Programmatic Control

This is made possible via the Provider Pattern.

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>
  );
}

Direction

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>
  );
}

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.

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>
  );
}

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

RootProvider

Property	Default	Type
`value`	-	TooltipApi<PropTypes>
`children`	-	ReactNode

RootContext

Property	Default	Type
`children`	-	(tooltip: TooltipApi<PropTypes>) => ReactNode

Trigger

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

Positioner

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

Content

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

Arrow

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

ArrowTip

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| 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