Tooltip

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

You might be looking for:

Hover Card
A richer preview on hover — name, type, extra lines.
Popover
Click to open a surface with interactive content.
Info Callout
An info icon that opens a title and description.
Toast
A short message that appears, then dismisses itself.

For the common case of a tooltip on a button, Button accepts tooltip and tooltipDelayDuration props directly — skip the parts below.

Playground

Content

Side

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

Usage

Mount a single TooltipProvider near the root of the app, then compose tooltips anywhere below it.

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@sophic/portal-ui/components/ui/tooltip";

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>Tooltip text</TooltipContent>
</Tooltip>

Props

Tooltip and TooltipTrigger pass every prop through to their Radix counterparts (open, onOpenChange, asChild, …). The parts below add defaults we document.

TooltipProvider

Prop

Type

Default

TooltipContent