Anchor Tooltip

Experimental

CSS-only tooltips using Anchor Positioning API and Popover API. No JavaScript positioning calculations needed.

Browser Support

Uses anchor-name and position-anchor for CSS-based positioning.

Preview

Top

Tooltip on top

Bottom

Tooltip on bottom

Left

Tooltip on left

Right

Tooltip on right

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/anchor-tooltip

Usage

import { AnchorTooltip } from "@/components/ui/anchor-tooltip"

<AnchorTooltip content="This is a tooltip">
  <span>Hover me</span>
</AnchorTooltip>

// With position
<AnchorTooltip content="Bottom tooltip" position="bottom">
  <Button>Click me</Button>
</AnchorTooltip>

CSS Feature

.anchor-trigger {
  anchor-name: --tooltip-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Props

Prop	Type	Default	Description
content	ReactNode	-	Tooltip content
position	"top" \| "bottom" \| "left" \| "right"	"top"	Tooltip position
className	string	-	Additional CSS classes