Tooltip

Dica curta ao pairar/focar um controle.

Sobreposições e menus

Carregando demonstração…

Código da demo

"use client";

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Passe o mouse</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Dica curta</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Use

Nomear botão só com ícone e mostrar atalho de teclado.

Não use

Não ponha informação essencial só no Tooltip: não existe no toque.
Texto longo ou com ação: use Popover ou HoverCard.

Acessibilidade: Não coloque info essencial só no tooltip; delay razoável.
Importar: import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@financeequity/ui/tooltip"
Neste repositório:
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip"
Dependências: radix-ui