Skip to content

Tooltips

Material for MkDocs makes it trivial to add tooltips to links, abbreviations and all other elements, which allows for implementing glossary-like functionality, as well as small hints that are shown when the user hovers or focuses an element.

Usage

Adding tooltips

The Markdown syntax allows to specify a title for each link, which will render as a beautiful tooltip when improved tooltips are enabled. Add a tooltip to a link with the following lines:

Link with tooltip, inline syntax
[Hover me](https://example.com "I'm a tooltip!")

Hover me

Tooltips can also be added to link references:

Link with tooltip, reference syntax
[Hover me][example]

  [example]: https://example.com "I'm a tooltip!"

Hover me

For all other elements, a title can be added by using the [Attribute Lists] extension:

Icon with tooltip
:material-information-outline:{ title="Important information" }

Adding abbreviations

Abbreviations can be defined by using a special syntax similar to links and footnotes, starting with a * and immediately followed by the term or acronym to be associated in square brackets:

Text with abbreviations
The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

The HTML specification is maintained by the W3C.

Adding a glossary

The [Snippets] extension can be used to implement a simple glossary by moving all abbreviations in a dedicated file1, and embedding it with the --8<-- notation at the end of each document:

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

  1. It's highly recommended to put the Markdown file containing the abbreviations outside of the docs folder (here, a folder with the name includes is used), as MkDocs might otherwise complain about an unreferenced file. ↩

Last update: 2023-07-21

Comments