On this page

Tooltip

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

<Tooltip>
  <TooltipTrigger>
    <Button>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>Top</Button>
  </TooltipTrigger>
  <TooltipContent>
    Tooltip on top
  </TooltipContent>
</Tooltip>

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

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

<Tooltip>
  <TooltipTrigger>
    <Button>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>No open delay</Button>
  </TooltipTrigger>
  <TooltipContent>
    Instant tooltip
  </TooltipContent>
</Tooltip>

<Tooltip openDelay={1000}>
  <TooltipTrigger>
    <Button>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>Start</Button>
    </TooltipTrigger>
    <TooltipContent align="start">
      Aligned to start
    </TooltipContent>
  </Tooltip>

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

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

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

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

API Reference

The root component that serves as a container for tooltip content. It manages the tooltip’s visibility and behavior based on user interaction.

openDelay: Time in milliseconds to wait before showing the tooltip.
closeDelay: Time in milliseconds to wait before hiding the tooltip.
disableHoverableContent: When true, prevents the tooltip from staying open when hovering over its content.

Prop	Type	Default
openDelay	`number`	`200`
closeDelay	`number`	`200`
disableHoverableContent	`boolean`	`false`

The component accepts all standard HTML attributes for <div> elements.

TooltipContent

The component that displays the actual tooltip content. It handles positioning and appearance of the tooltip.

side: Determines which side of the trigger the tooltip appears on.
align: Controls the alignment of the tooltip relative to the trigger.
sideOffset: Distance in pixels between the tooltip and the trigger element.
avoidCollisions: When true, the tooltip will reposition itself to avoid colliding with the viewport edges.
animationDuration: Duration of the open and close animations in milliseconds.

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

The component accepts all standard HTML attributes for <div> elements.

TooltipTrigger

A wrapper component for the element that triggers the tooltip. The tooltip will appear when the user hovers over or focuses on this trigger element.

The component is a simple wrapper that passes through its children as a slot.

Changelog

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.