--- title: "Como personalizar links e dicas de ferramentas no Markdown" slug: "using-links-and-tooltips-in-markdown" updated: 2026-06-22T08:58:57Z published: 2026-06-22T08:58:57Z canonical: "docs.document360.com/using-links-and-tooltips-in-markdown" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Como personalizar links e dicas de ferramentas no Markdown O editor Markdown suporta sintaxe padrão de links e, por meio de HTML inline, uma série de melhorias — dicas de ferramenta para passar o mouse de texto, estilo de link, abertura de links em novas abas e ícones ou emojis personalizados. Este artigo aborda todas essas técnicas. --- ## Quando usar essas técnicas - **Links âncora internos** — ajudam os leitores a saltar para uma seção específica dentro de um artigo longo sem precisar rolar a página. - **Links entre artigos** — conecte artigos relacionados na sua base de conhecimento para guiar os leitores por um tema. - **Dicas** — explique abreviações, termos técnicos ou detalhes opcionais em linha sem sobrecarregar a página. - **Links estilizados** — use texto em negrito ou itálico para chamar atenção para referências importantes. - **Abrir em uma nova aba** — mantenha os leitores no artigo atual enquanto permite que abram uma referência em segundo plano. - **Ícones e emojis** — adicione sinais visuais a chamadas, rótulos ou indicadores de status. --- ## Referência rápida | Objetivo | Sintaxe | | --- | --- | | Elo âncora interno | `[Link text](#heading-slug)` | | Link cruzado entre artigos | `[Link text](../article-slug)` | | Link com dica de ferramenta | `[Link text](#section "Tooltip text")` | | Texto do link em negrito | `[**Bold text**](url)` | | Texto do link itálico | `[_Italic text_](url)` | | Abrir em uma nova aba | `<a href="url" target="_blank">Link text</a>` | | Passe o mouse sobre a dica de texto | `<span title="Full term">Abbreviation</span>` | | Emoji inline | Cole diretamente — 📌 ⚠️ ✅ | | Ícone inline a partir da URL | `<img src="icon-url" width="16" height="16"> Label` | --- ## Como adicionar links no Markdown ### Links âncora internos Um link âncora interno leva os leitores a um título específico dentro do mesmo artigo. 1. Adicione um título ao seu artigo. Por exemplo: ``` ## How it works ``` 2. Crie o link usando este padrão: ``` [Jump to How it works](#how-it-works) ``` Quando um leitor clica neste link, ele é levado diretamente para a `## How it works` seção. - Texto do link dentro de colchetes quadrados `[ ]` - `#` seguido pelo texto do título entre parênteses `( )` - Converta o cabeçalho para minúsculas e substitua os espaços por hífens DICA PROFISSIONAL Links âncora são insensíveis a maiúsculas minúsculas e espaços se tornam hífens automaticamente. Remova quaisquer caracteres especiais do rumo antes de construir o slug âncora. ### Links entre artigos Para linkar para outro artigo na sua base de conhecimento, use o prefixo do artigo slug com `../` para avançar um nível em relação à posição atual do artigo. ``` [Go to Getting Started](../getting-started) ``` Este link sobe um nível em relação ao artigo atual e abre o `Getting Started` artigo. ### Adicionando uma dica de ferramenta a um link Adicione uma dica de ferramenta que apareça ao passar o curso, colocando o texto da dica entre aspas após o alvo do link, dentro dos parênteses. ``` [Troubleshooting guide](#troubleshooting "Click to view troubleshooting section") ``` Passando o mouse sobre o link exibe: *Clique para ver a seção de solução de problemas*. ### Texto do link de estilo Aplique formatação em negrito ou itálico ao texto de link, envolvendo o texto dentro dos colchetes quadrados com a sintaxe padrão do Markdown. ``` [**Important update**](../release-notes) [_Read the guide_](../setup-guide) ``` ![Markdown editor showing a bold link and an italic link rendered in the article preview.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/6_ScreenShot-Customize_links.png) ### Abrindo um link em uma nova aba Por padrão, os links do Markdown abrem na mesma aba. Use uma tag HTML `<a>` com `target="_blank"` para abrir o link em uma nova aba. ``` Go to Getting Started ``` --- ## Como adicionar dicas de hover ao texto Use a tag HTML `<span>` com um `title` atributo para exibir uma dica de ferramenta quando um leitor pairar sobre qualquer palavra ou frase — não apenas links. ``` term ``` **Exemplo — expanda uma abreviação para o hover:** ``` SEO ``` Passando o mouse sobre os displays *SEO* : *Otimização para Mecanismos de Busca*. ![Markdown editor showing the span title code snippet for the SEO tooltip example.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_ScreenShot-Markdown_tooltip.png) **Desfecho:** ![Rendered article showing the SEO abbreviation with a tooltip displaying Search Engine Optimization on hover.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_ScreenShot-Markdown_tooltip.png) --- ## Como adicionar ícones e emojis ### Usando emojis Copie e cole emojis diretamente no seu conteúdo. Eles renderizam em linha sem nenhuma sintaxe adicional. ``` 📌 Important note ⚠️ Caution ✅ Completed ``` ### Usando ícones de uma URL Use uma tag HTML `<img>` para inserir um ícone de uma URL externa alinhada com seu texto. ``` Information ``` Substitua a `src` URL, `width`, `height`, e rotule o texto pelos valores necessários. ![Markdown editor showing an inline icon rendered next to text using an HTML img tag with an external URL.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/5_ScreenShot-Markdown_icons.png) --- ## Melhores práticas - **Use texto descritivo do link** — evite "clique aqui" ou "leia mais". Use texto que indique aos leitores para onde o link vai, como "Guia de Iniciação" ou "Referência da API". - **Teste links âncora após editar títulos** — se você renomear um título, qualquer link âncora apontando para ele vai quebrar. Atualize o slug em todos os links que referenciam o título. - **Use tooltips para abreviações, não definições** — tooltips são lidos apenas no passa-mouse e não são acessíveis a todos os usuários. Para definições essenciais, inclua a explicação no texto principal. - **Mantenha o uso consistente de emojis e ícones** — concorde com um pequeno conjunto de ícones ou emojis para sua base de conhecimento (por exemplo, ⚠️ para avisos, ✅ para etapas concluídas) e use-os de forma consistente entre os artigos.