Contextual labels on hover and focus
Tooltips provide brief, informative text when users hover over or focus on an element. The bubble rides the same floating surface as Popover, staying light in light mode and dark in dark, and supports four placement positions with a directional arrow. Pressing Escape dismisses a visible tooltip from anywhere on the page.
Positions
Tooltip on topTooltip on bottomTooltip on leftTooltip on right
On icon buttons
SearchSettingsNotificationsProfile
Delay options
No delayDefault delay (300ms)Slow delay (800ms)
// From the npm package
import { Tooltip } from 'rift-ds/components/Tooltip/Tooltip';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/tooltip.json