Visão geral

O Tooltip é o componente mais discreto de feedback contextual — apenas texto ou kbd, sem interatividade.

Demo — passe o mouse nos botões

Import

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip" // TooltipProvider já está no root layout — não é necessário importar

Setup

O TooltipProvider já está configurado no src/app/layout.tsx. Não é necessário adicionar provider em cada uso.

Com atalho de teclado

O Tooltip suporta o componente Kbd diretamente no conteúdo.

Padrão de implementação

Snippets para uso do Tooltip.

Tooltip básico

<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" variant="ghost" aria-label="Configurações">
      <SettingsIcon />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Configurações</TooltipContent>
</Tooltip>

Com atalho de teclado

<TooltipContent className="flex items-center gap-1.5">
  Salvar
  <Kbd size="sm">⌘</Kbd>
  <Kbd size="sm">S</Kbd>
</TooltipContent>

Posicionamento

<TooltipContent
  side="right"     // top | right | bottom | left
  align="center"   // start | center | end
  sideOffset={4}   // distância em px
>
  Texto do tooltip
</TooltipContent>

Props e uso

API dos sub-componentes do Tooltip.

Props principais

delayDuration

number

Delay em ms antes de abrir. Padrão: 700ms.

TooltipContent side

"top" | "right" | "bottom" | "left"

Lado de exibição em relação ao trigger.

TooltipContent align

"start" | "center" | "end"

Alinhamento no eixo perpendicular ao side.

TooltipTrigger asChild

boolean

Mescla o trigger com o elemento filho.

Acessibilidade

Para botões de ícone, use ambos: aria-label no trigger E Tooltip — o aria-label funciona sem mouse, o Tooltip para usuários visuais.

Nunca coloque informação crítica apenas no Tooltip — usuários mobile e de teclado podem não conseguir acessá-lo.

O Tooltip abre no focus do trigger para suporte parcial a teclado (via Tab).

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter