Pular para o conteúdo

Componentes

Tooltip

Chip Graffiti com seta, 12px, atraso de 400ms. Entra só por opacidade. Explica o que já está na tela. Nunca carrega a regra.

betaDiálogodesde 0.2.0@hiboupay/react

Exemplos#

Chip Graffiti · atraso 400ms

Mesa

Celular · 390

Atalho em mono · no toque o nome do botão é o contrato

Importar#

tsx
import { Tooltip, TooltipProvider } from "@hiboupay/react";
import type { TooltipProps } from "@hiboupay/react";

Quando usar#

Use quando

  • Ícone sem texto (aria-label no gatilho + tooltip de apoio).
  • Expandir um ID ou um atalho.

Não use quando

  • Informação essencial: coloque na tela.
  • Erro: Input error ou ErrorBanner.
  • Menu de ações: DropdownMenu.

Anatomia#

  1. 01Gatilho (asChild)
  2. 02Chip graffiti com seta, texto branco e atalho mono

Estados#

ocultovisível após 400msvisível no focono toque: não aparece

API#

Props documentadas no registro. * indica obrigatória.

Propriedades
PropTipoPadrãoDescrição
content*ReactNodeTexto curto.
children*ReactNodeGatilho. Precisa aceitar ref (asChild).
side"top" | "right" | "bottom" | "left""top"Lado preferido.
shortcutstringAtalho em mono, à direita do texto.
delaynumber400ms até abrir. O Provider também usa 400.

Acessibilidade#

Teclado

TabfocoMostra.
EscEsconde.

Leitor de tela

  1. —O gatilho precisa de nome (aria-label ou texto). No toque o tooltip não abre: o nome do gatilho é o contrato.

Boas práticas#

Faça

  • Uma linha, até ~12 palavras.
  • Botão ícone sempre com aria-label, tooltip é extra.

Evite

  • Tooltip em texto corrido.
  • Tooltip com botão dentro.

Conteúdo#

  1. —Sem ponto final. "ID da cobrança", "Atalho ⌘K".

Tokens#

Os tokens que desenham este componente. Clique para ver valor, variável e classe.

color.graffitiradius.smelevation.2

Relacionados#

Diálogo

DropdownMenu

Menu de vidro no desktop; folha de papel no celular. Item 34 (40 no toque), perigo em tinta rosa. Nunca é navegação e nunca é filtro.

Ação

Button

Ação. Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. No foco, o anel de 2px chega agora e o halo azul entra depois.