Skip to content
Logic2BUI

Search docs

Search components and documentation

New
Menu

Tooltip

A popup that displays information related to an element when it receives focus or the mouse hovers over it.

Installation

npx logic2b@next add tooltip

Usage

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Usage notes

Note: Tooltip wraps itself in a TooltipProvider, so it works standalone. Wrap your app in a single TooltipProvider to share delay settings across multiple tooltips.

TooltipContent also accepts Radix positioning props such as side (top \| right \| bottom \| left) and align.

Examples

Sides

On an icon button

Accessibility

  • The tooltip opens on hover and on keyboard focus of the trigger, and closes on Escape.
  • Use TooltipTrigger asChild so the tooltip attaches to a real interactive element (e.g. a Button) that can receive focus.
  • Tooltips supplement, but do not replace, an accessible name — give icon-only triggers their own aria-label.

Live playground

Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.

Generated JSX
<Tooltip>
  <TooltipTrigger
    className="rounded-md border px-4 py-2 text-sm font-medium"
  >Registry status</TooltipTrigger>
  <TooltipContent>All quality gates pass</TooltipContent>
</Tooltip>

API reference

Generated from the public TypeScript exports in src/ui/tooltip.tsx.

View JSON

Tooltip

Component
Props: React.ComponentProps<typeof TooltipPrimitive.Root>

TooltipTrigger

Component
Props: React.ComponentProps<typeof TooltipPrimitive.Trigger>

TooltipContent

Component
Props: React.ComponentProps<typeof TooltipPrimitive.Content>
PropTypeRequiredDefaultDescription
sideOffsetnumberNo0—

TooltipProvider

Component
Props: React.ComponentProps<typeof TooltipPrimitive.Provider>
PropTypeRequiredDefaultDescription
delayDurationnumberNo0The duration from when the pointer enters the trigger until the tooltip gets opened.

Accessibility contract

Machine-readable behavior and consumer responsibilities for tooltip.

View JSON
Support
Primitive-managed
Pattern
tooltip
Radix Tooltip
Keyboard interactions for tooltip
KeysBehavior
TabOpening trigger focus reveals the tooltip.
EscapeClose the open surface and restore focus.

Built-in semantics

  • Tooltip content is associated with its trigger and opens for keyboard focus as well as hover.

Consumer responsibilities

  • Tooltips supplement rather than replace the trigger's accessible name.