Warren UI

Tooltip

CSS-only hover/focus supplementary label.

Router
042
Context
71.4%
Drafts
12
Source
"use client"

import { Stat } from "@/registry/warren/stat/stat"
import { Tooltip } from "@/registry/warren/tooltip/tooltip"

export default function TooltipDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-10 py-12">
      <Tooltip content="ACTIVE ROUTER · LINKED" side="top">
        <Stat label="Router" value="042" tone="primary" />
      </Tooltip>
      <Tooltip content="TRUNCATED CONTEXT WINDOW" side="bottom">
        <Stat label="Context" value="71.4%" tone="success" />
      </Tooltip>
      <Tooltip content="REJECTED THIS TICK" side="right">
        <Stat label="Drafts" value="12" tone="danger" />
      </Tooltip>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/tooltip.json

Usage

import { Tooltip } from "@/components/ui/tooltip"
<Tooltip content="TRUNCATED RUN ID" side="bottom">
  <Stat label="Router" value="042" />
</Tooltip>

Tooltip wraps its children and reveals content on hover or keyboard focus with a 150ms opacity fade — pure CSS (group-hover / group-focus-within), no JavaScript state. The trigger keeps its own accessible name, and the tooltip is wired as a supplementary description: the trigger carries aria-describedby pointing at the tooltip's role="tooltip" element, so assistive tech can announce the content.

Placement

The side prop places the label above (default), below, left, or right of the trigger, centered on it with a 4px offset:

top · bottom · left · right

API Reference

Prop

Type

On this page

InstallationUsagePlacementAPI Reference