Tooltip

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

Um rótulo curto e transitório que aparece no hover ou no focus. Não é o lugar para conteúdo acionável. Para isso, use Popover.

Visão geral

Código

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>

Acessibilidade

Sempre envolva seus tooltips em um único <TooltipProvider> próximo à raiz da aplicação.
Os tooltips aparecem no hover e no focus por teclado. Não dependa só do hover.
Não coloque informações críticas aqui. Qualquer coisa importante precisa estar visível sem hover.

Progress Card