Tooltip

A popup that displays information related to an element on focus or hover.

tsx

1
2
3
4
5
6<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Tooltip — infobulle contextuelle qui apparaît au hover ou au focus du trigger. Contenu court (nom d'un bouton icône, shortcut clavier, description brève). Pour du contenu riche préférer HoverCard.

Pattern PRISM : le trigger et le content sont frères dans un wrapper Tooltip. L'island CSS-only rend le content via opacity-0 → group-hover:opacity-100 group-focus-within:opacity-100. Zéro JS.

Installation

Terminal

$ bext ui add tooltip

Usage

tsx

1
2
3
4
5
6
7
8import { Tooltip, TooltipTrigger, TooltipContent } from "@bext-stack/ui/primitives"

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

Anatomy

<Tooltip>
  ├── <TooltipTrigger>
  │   └── <Button>Hover me</Button>
  └── <TooltipContent>Add to library</TooltipContent>

API Reference

Prop	Type	Default	Description
className	string	—	Wrapper relative inline-block (group).

TooltipTrigger

Prop	Type	Default	Description
children	ReactNode	—	Élément déclencheur (bouton, icône, texte).

TooltipContent

Prop	Type	Default	Description
className	string	—	Contenu de l'infobulle. Défaut : absolute bg-primary text-primary-foreground text-xs px-2 py-1 rounded-md, invisible → visible au hover.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
group	Tooltip	—	Utilisé par group-hover: / group-focus-within: sur TooltipContent.

Keyboard

Key	Action
`Tab`	Focus le trigger → tooltip visible.

Accessibility

TooltipContent devrait porter role="tooltip" pour être annoncé aux AT.

Le trigger doit rester utilisable au clavier (pas seulement au hover). Le CSS group-focus-within active le tooltip aussi au focus keyboard — vérifier.

Contenu doit rester court (≤ 60 caractères). Pour plus, utiliser HoverCard ou Popover.

Examples

Sur icône (icon button)

tsx

1
2
3
4
5
6<Tooltip>
  <TooltipTrigger>
    <Button variant="ghost" size="icon" aria-label="Copy"><CopyIcon /></Button>
  </TooltipTrigger>
  <TooltipContent>Copy to clipboard</TooltipContent>
</Tooltip>

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A tooltip shows a brief label on hover. onMouseEnter / onMouseLeave
// flip a `show` signal; <Show> mounts and unmounts the bubble.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Tooltip</h1>
      <p style="color:#64748b;margin-top:0">A floating label revealed on hover (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A tooltip shows a brief label on hover. The hover state lives in a
// "use client" island (onMouseEnter / onMouseLeave).
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Tooltip</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A floating label revealed on hover.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Toggle Group Conversation →

On This Page