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

Framework Availability

Astro Available React Available

Tooltip is available for Astro and React.

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>

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>

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>

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. 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

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