How to customize links and tooltips in Markdown?

Prev Next

Plans supporting this feature: Professional Business Enterprise

Adding and customizing links in Markdown

Internal or Anchor Links help users find relevant sections within an article quickly. You can link texts by using Markdown code snippets that you can directly paste in the editor. You can add two types of links:

Internal (anchor) links:

  • Add a new heading in the article.

    For example,

    ## How it works
  • To link a text to a heading within the same article, place the link text in square brackets [] and the target heading (converted to lowercase with spaces replaced by hyphens) in parentheses (), prefixed with a #.

    For example,

    [Jump to How it works](#how-it-works)

Cross-article links:

To link to a different article in the knowledge base, place the link text in square brackets [] and the article name (converted to lowercase with spaces replaced by hyphens) in parentheses (), prefixed with a …/.

For example,

[Go to Getting Started](../getting-started)

PRO TIP

When adding internal/anchor links to texts,

  • Remove special characters from heading anchors.

  • Anchor links are case-insensitive, and space becomes hyphens -.

Once you’ve added links, you can customize them to improve readability, accessibility, and user experience.

Adding a title attribute

You can add a tooltip (title) that appears when you hover over the link and provides additional context about the link. Markdown doesn't have a built-in way to add tooltips to links. Use the below code snippet to add this customization:

[Troubleshooting guide](#troubleshooting "Click to view troubleshooting section")

For example, the above code snippet adds a tooltip to the hyperlink text that says ‘Click to view troubleshooting section‘ on hover.

Styling links with Markdown + HTML

Markdown supports inline HTML, which allows you to apply styles such as bold or italic within a link. This provides enhanced customization to the hyperlinks that you have added.

For example, use the below code snippet to apply styles such as bold and italic to a hyperlink text.

[**Important update**](../release-notes)  
[_Read the guide_](../setup-guide)  

Opening links in a new tab

By default, Markdown links open in the same tab. If you wish to open a link in a new tab, use the below HTML code snippet.

<a href="https://docs.document360.com/docs/getting-started" target="_blank">Go to Getting Started</a>

For example, by using the above code snippet, you will be navigated to the ‘Getting Started’ article in a new browser tab on click.


Adding tooltips or hover text in Markdown

Tooltips display helpful text when a user hovers over a word or phrase. Use tooltips to explain abbreviations, technical terms, or optional details without cluttering your content. Readers can hover for clarification without needing to navigate away.

Markdown doesn't have a built-in way to add tooltips to hover text. You can use the HTML tags provided in this article as a workaround to achieve this effect.

<span title="display-text">term</span>

For example, the below code snippet shows ‘Search Engine Optimization’ when a user hovers over the term SEO.

<span title="Search Engine Optimization">SEO</span>

Outcome

Image showing tooltip on hover text


FAQ

Can I add custom icons or emojis for visual enhancement?

Yes, you can add custom icons or emojis for visual enhancement. To do so,

  1. Simply copy and paste emojis (e.g., 📌, ⚠️, ✅) directly into your content.

  2. Alternatively, use HTML <img> tags to insert icons from a URL:'

    <img src="https://img.icons8.com/color/48/000000/info.png" width="16" height="16"> Information
  3. Replace the icon source URL, dimensions, and text as required.

    Image showing the use of icons in Markdown editor