Tooltip

Default

Wrap your trigger element with Tooltip and TooltipTrigger, then place the label text in TooltipContent. A TooltipProvider must wrap all tooltips in your app.

Side Offset

Use the sideOffset prop on TooltipContent to control the distance between the trigger and the tooltip.

Installation

npx visor add tooltip

This copies two files into your project:

• components/ui/tooltip/tooltip.tsx — the component
• components/ui/tooltip/tooltip.module.css — the styles

Usage

import {
  Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
} from '@/components/ui/tooltip/tooltip';

// Wrap your app with TooltipProvider once
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button>?</button>
    </TooltipTrigger>
    <TooltipContent>Help text</TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

TooltipProps

No props data available for “tooltip”.

Sub-components

Accessibility

• Built on @radix-ui/react-tooltip with automatic aria-describedby associations.
• Tooltips appear on both hover and keyboard focus, ensuring full keyboard accessibility.
• Use tooltips for supplementary labels only — they should not contain essential information or interactive elements.