Tooltip

@velon-finance/ui · status: stable · atom · @radix-ui/react-tooltip

A short, transient label that appears on hover or focus. Not a place for actionable content. for that, use Popover.

Overview

Code

import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@velon-finance/ui'
 
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>Texto curto explicando.</TooltipContent>
  </Tooltip>
</TooltipProvider>

Accessibility

• Always wrap your tooltips in a single <TooltipProvider> near the app root.
• Tooltips appear on hover and keyboard focus. don’t rely on hover alone.
• Don’t put critical information here. Anything important must be visible without hovering.