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>

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>

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

The root component that manages tooltip visibility.

Prop	Type	Default
`openDelay`	`number`	`200`
`closeDelay`	`number`	`200`
`disableHoverableContent`	`boolean`	`false`
`class`	`string`	-

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

Additional Notes:

openDelay: Time in milliseconds to wait before showing the tooltip after hover
closeDelay: Time in milliseconds to wait before hiding the tooltip after leaving the trigger/content
disableHoverableContent: When true, prevents the tooltip from staying open when the user hovers over the tooltip content itself

TooltipContent

The positioned popup content.

Prop	Type	Default
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`
`align`	`"start" \| "center" \| "end"`	`"center"`
`sideOffset`	`number`	`4`
`avoidCollisions`	`boolean`	`true`
`animationDuration`	`number`	`150`
`class`	`string`	-

<TooltipContent side="right" align="center">
  Tooltip on right
</TooltipContent>

Additional Notes:

side: Which side of the trigger the tooltip appears on (top, right, bottom, or left)
align: Alignment of the tooltip relative to the trigger along the chosen side
sideOffset: Gap in pixels between the tooltip and the trigger element
avoidCollisions: When true, automatically repositions the tooltip to stay within the viewport
animationDuration: Duration in milliseconds for the open/close animation

TooltipTrigger

Wraps the element that triggers the tooltip.

Prop	Type	Default
`class`	`string`	-

<TooltipTrigger>
  <Button variant="outline">Hover me</Button>
</TooltipTrigger>

Changelog

v1.3.0

style updates
add a caret to the tooltip content

v1.2.0

Add a data-slot attribute to all components to enable global styling updates

v1.1.2

Fix exit animation

v1.1.1

Add class will-change-transform to TooltipContent to improve CSS animations by providing a browser hint

v1.1.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.