Dica de ferramenta
Exiba definições e contexto ao passar o cursor. Defina termos, explique siglas ou vincule conteúdo relacionado sem poluir a página.
Adicione texto ao passar o cursor para definir termos, explicar siglas ou vincular páginas relacionadas sem poluir o conteúdo principal.
Use Tooltips quando:
- Definir termos em linha sem interromper o fluxo de leitura
- Explicar siglas que alguns leitores talvez não conheçam
- Fornecer contexto útil, mas não essencial
- Vincular conteúdo relacionado com uma chamada para ação
Tooltip básico
Passe o cursor sobre APIUm conjunto de protocolos para que aplicativos de software se comuniquem. para ver a definição.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>Com título
Adicione um título acima do texto da dica:
Passe o cursor sobre APIAPIInterface de Programação de Aplicativos: um conjunto de protocolos para que aplicativos de software se comuniquem. para ver a definição com um título.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>Com link de chamada para ação
Inclua um link para que os usuários saibam mais:
Saiba mais sobre APIsAPIInterface de Programação de Aplicativos: um conjunto de protocolos para que aplicativos de software se comuniquem.Saiba mais → em nossa documentação.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>Uso em linha
Tooltips funcionam em linha com o texto. Você pode explicar HTMLLinguagem de Marcação de Hipertexto, CSSFolhas de Estilo em Cascata ou termos de JavaScriptJavaScript em linha.
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.Tooltips versus outros componentes
| Necessidade | Componente |
|---|---|
| Definir um termo em linha | Tooltip |
| Explicar um conceito em detalhes | Expandable ou seção separada |
| Alertar sobre algo importante | Callout (Note, Warning) |
| Mostrar código contextual | CodeGroup ou código em linha |
Regra geral: Tooltips servem para definições rápidas (1–2 frases). Explicações mais longas devem ficar no conteúdo principal ou em um Expandable.
Props
O texto da dica exibido ao passar o cursor.
Texto exibido acima da dica.
Texto do link de chamada para ação.
URL da chamada para ação (obrigatória com cta).
O texto que aciona a dica.
Acessibilidade
- Os Tooltips são acessíveis pelo teclado (pressione Tab para focar; são exibidos ao receber foco)
- Usam
role="tooltip"para leitores de tela - O texto acionador tem um sublinhado tracejado para indicar interatividade