---
title: Dica de ferramenta
description: Exiba definições e contexto ao passar o cursor. Defina termos, explique siglas ou vincule conteúdo relacionado sem poluir a página.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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 <Tooltip tip="Um conjunto de protocolos para que aplicativos de software se comuniquem.">API</Tooltip> para ver a definição.

```jsx
<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 <Tooltip headline="API" tip="Interface de Programação de Aplicativos: um conjunto de protocolos para que aplicativos de software se comuniquem.">API</Tooltip> para ver a definição com um título.

```jsx
<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 <Tooltip headline="API" tip="Interface de Programação de Aplicativos: um conjunto de protocolos para que aplicativos de software se comuniquem." cta="Saiba mais" href="/pt/components/overview">APIs</Tooltip> em nossa documentação.

```jsx
<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 <Tooltip tip="Linguagem de Marcação de Hipertexto">HTML</Tooltip>, <Tooltip tip="Folhas de Estilo em Cascata">CSS</Tooltip> ou termos de <Tooltip tip="JavaScript">JavaScript</Tooltip> em linha.

```jsx
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

<ParamField name="tip" type="string" required>
  O texto da dica exibido ao passar o cursor.
</ParamField>

<ParamField name="headline" type="string">
  Texto exibido acima da dica.
</ParamField>

<ParamField name="cta" type="string">
  Texto do link de chamada para ação.
</ParamField>

<ParamField name="href" type="string">
  URL da chamada para ação (obrigatória com `cta`).
</ParamField>

<ParamField name="children" type="ReactNode">
  O texto que aciona a dica.
</ParamField>

## 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

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Navegue por todos os componentes disponíveis
  </Card>
  <Card title="Fundamentos de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Saiba como usar componentes em MDX
  </Card>
</Columns>