On this page

Tooltip

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    Add to library
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
            <TooltipContent>
              Add to library
            </TooltipContent>
      </Tooltip>
    </>
  );
}

Installation

pnpx starwind@latest add tooltip

npx starwind@latest add tooltip

yarn dlx starwind@latest add tooltip

Usage

Positioning

Control the position and alignment of the tooltip using the side and align props.

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Top</Button>
  </TooltipTrigger>
  <TooltipContent>
    Tooltip on top
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Right</Button>
  </TooltipTrigger>
  <TooltipContent side="right">
    Tooltip on right
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Bottom</Button>
  </TooltipTrigger>
  <TooltipContent side="bottom">
    Tooltip on bottom
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Left</Button>
  </TooltipTrigger>
  <TooltipContent side="left">
    Tooltip on left
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Top</Button>
        </TooltipTrigger>
        <TooltipContent>
          Tooltip on top
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Right</Button>
        </TooltipTrigger>
        <TooltipContent side="right">
          Tooltip on right
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Bottom</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          Tooltip on bottom
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Left</Button>
        </TooltipTrigger>
        <TooltipContent side="left">
          Tooltip on left
        </TooltipContent>
      </Tooltip>
    </>
  );
}

Delay

Customize the open and close delay using the openDelay and closeDelay props.

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip openDelay={0} closeDelay={500}>
  <TooltipTrigger>
    <Button variant="outline">No open delay</Button>
  </TooltipTrigger>
  <TooltipContent>
    Instant tooltip
  </TooltipContent>
</Tooltip>

<Tooltip openDelay={1000}>
  <TooltipTrigger>
    <Button variant="outline">Slow open</Button>
  </TooltipTrigger>
  <TooltipContent>
    Opens after 1 second
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip openDelay={0} closeDelay={500}>
        <TooltipTrigger>
          <Button variant="outline">No open delay</Button>
        </TooltipTrigger>
        <TooltipContent>
          Instant tooltip
        </TooltipContent>
      </Tooltip>

      <Tooltip openDelay={1000}>
        <TooltipTrigger>
          <Button variant="outline">Slow open</Button>
        </TooltipTrigger>
        <TooltipContent>
          Opens after 1 second
        </TooltipContent>
      </Tooltip>
    </>
  );
}

Alignment

Control the alignment of the tooltip relative to its trigger using the align prop.

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Start</Button>
    </TooltipTrigger>
    <TooltipContent align="start">
      Aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Center</Button>
    </TooltipTrigger>
    <TooltipContent align="center">
      Aligned to center
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">End</Button>
    </TooltipTrigger>
    <TooltipContent align="end">
      Aligned to end
    </TooltipContent>
  </Tooltip>
</div>

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom Start</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start">
      Bottom aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom End</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="end">
      Bottom aligned to end
    </TooltipContent>
  </Tooltip>
</div>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <div className="flex justify-between w-[300px]">
        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Start</Button>
          </TooltipTrigger>
          <TooltipContent align="start">
            Aligned to start
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Center</Button>
          </TooltipTrigger>
          <TooltipContent align="center">
            Aligned to center
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">End</Button>
          </TooltipTrigger>
          <TooltipContent align="end">
            Aligned to end
          </TooltipContent>
        </Tooltip>
      </div>

      <div className="flex justify-between w-[300px]">
        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Bottom Start</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" align="start">
            Bottom aligned to start
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Bottom End</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" align="end">
            Bottom aligned to end
          </TooltipContent>
        </Tooltip>
      </div>
    </>
  );
}

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Tooltip Trigger

Inherits span attributes.

Contains the following additional props:

Prop Type Default

asChild boolean true

Description: Merges the component behavior and props into its child element.
Classification: Primitive override
Primitive prop: tooltip.Trigger.asChild

Inherits div attributes. Omits `tabIndex` and `tabindex`.

Contains the following additional props:

Prop Type Default

positionerClass string —

Description: Adds classes to the generated floating positioner element.
Classification: Wrapper prop

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Tooltip.

Primitive API

Tooltip Primitive

Runtime API

Tooltip primitive: createTooltip from @starwind-ui/runtime/tooltip

Changelog

v2.0.2

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v2.0.0

Rebuilt Tooltip on Starwind Runtime for hover and focus timing, floating placement, and dismissal.
See the Tooltip Primitive for the underlying unstyled anatomy and behavior API.