Dica

Uma dica de superfície de luz construída sobre React Aria - ela abre no hover e foco, gira para ficar na tela, aponta um cuidado em seu gatilho, e borra + escalas de 0,9 no caminho para dentro e para fora. Hover qualquer um dos botões abaixo.

Posições

Uma dica pode sentar-se em qualquer lado de seu gatilho - definir o placement aderente Tooltip para top (por omissão), bottom, left ou right. O cursor e a transformada de borrão giram para corresponder, e React Aria automaticamente gira para o lado oposto se não houver espaço na tela. Hover os botões abaixo.

Cada dica abre da mesma forma, independentemente do lado: você paira ou foca o teclado TooltipTrigger. O primeiro filho do gatilho é o que você aponta (aqui o nosso Button, envolto em Focusable Então, uma planície. <button> torna-se um gatilho válido), e o Tooltip ao lado é o que aparece. Assim, uma dica do lado esquerdo é apenas placement="left" - nada sobre as alterações de interação:

<TooltipTrigger delay={0}> <Focusable> <Button variant="secondary">Top</Button> </Focusable> <Tooltip placement="top">Top</Tooltip></TooltipTrigger>

Instalação

Você pode adicionar este componente de dicas usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add tooltip

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Tamanhos

A dica vem em 2 tamanhos: sm (12px Legenda 1, o padrão - usado pelo mapa de calor das contribuições) e md (14px Corpo 1, com estofamento mais espaçoso). size Prop na Tooltip - comparar Pequeno e Médio gatilhos na antevisão acima.

<Tooltip size="sm">12 contributions on April 26</Tooltip>

Sumário

As dicas são construídas sobre React Aria, portanto, a criança solteira do gatilho deve ser um componente focalizável (react-aria Button, ou qualquer coisa que use useFocusable). Hover e teclado focam ambos abri-lo, Escape fecha-a, e o gatilho fica aria-describedby Ligados à dica automaticamente. Vamos cobrir os seguintes tópicos:

  • Dicas básicas
  • Colocação & o curso
  • Suportes de seta e deslocamento
  • Abrir / fechar o atraso
  • Transição emblemática e em escala

Para um uso do mundo real, paire os quadrados no ContributionsCard - cada célula é uma TooltipTrigger mostrando a sua data e contagem.