Skip to content
FelicityUI

Tooltip

Contextual hint using native popover when available.

Installation

terminal
npx felicityui add tooltip --platform react

Usage

example.tsx
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"

<Tooltip content="Commit hash copied to clipboard.">
  <TooltipTrigger>
    <Button variant="outline">Hover or focus</Button>
  </TooltipTrigger>
</Tooltip>

Contextual hint using native popover when available.

FelicityUI uses native HTML, semantic tokens, and ruled surfaces. Install with felicityui add tooltip --platform react.

Default

Hairline tooltip on hover and focus — no heavy shadow.

API Reference

PropTypeDefaultDescription
classNamestring—Additional classes.

Accessibility

WCAG 2.2 AA

  • Native semantics and keyboard support.
  • Visible focus indicator.
  • Sufficient contrast on semantic token pairs.

Platform notes

React

Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper accent used sparingly, hairline borders, and ruled layouts — not generic SaaS chrome.

  • Server Component compatible unless marked use client.
  • Uses data-slot attributes for anatomy.
  • Focus-visible rings use color.focus.ring.