|
| 1 | +--- |
| 2 | +template: overrides/main.html |
| 3 | +icon: material/comment-processing-outline |
| 4 | +--- |
| 5 | + |
| 6 | +# Tooltips |
| 7 | + |
| 8 | +Material for MkDocs makes it trivial to add tooltips to links, abbreviations |
| 9 | +and all other elements, which allows for implementing glossary-like |
| 10 | +functionality, as well as small hints that are shown when the user hovers or |
| 11 | +focuses an element. |
| 12 | + |
| 13 | +## Configuration |
| 14 | + |
| 15 | +This configuration enables support for tooltips and abbreviations and allows to |
| 16 | +build a simple glossary, sourcing definitions from a central location. Add the |
| 17 | +following lines to `mkdocs.yml`: |
| 18 | + |
| 19 | +``` yaml |
| 20 | +markdown_extensions: |
| 21 | + - abbr |
| 22 | + - pymdownx.snippets |
| 23 | +``` |
| 24 | +
|
| 25 | +See additional configuration options: |
| 26 | +
|
| 27 | +- [Abbreviations] |
| 28 | +- [Snippets] |
| 29 | +
|
| 30 | + [Abbreviations]: ../setup/extensions/python-markdown.md#abbreviations |
| 31 | + [Snippets]: ../setup/extensions/python-markdown-extensions.md#snippets |
| 32 | +
|
| 33 | +### Improved tooltips |
| 34 | +
|
| 35 | +[:octicons-heart-fill-24:{ .mdx-heart } Sponsors only][Insiders]{ .mdx-insiders } · |
| 36 | +[:octicons-tag-24: insiders-4.15.0][Insiders] · |
| 37 | +:octicons-beaker-24: Experimental |
| 38 | +
|
| 39 | +When improved tooltips are enabled, Material for MkDocs replaces the browser's |
| 40 | +rendering logic for `title` attribute with beautiful little tooltips. |
| 41 | +Add the following lines to `mkdocs.yml`: |
| 42 | + |
| 43 | +``` yaml |
| 44 | +theme: |
| 45 | + features: |
| 46 | + - content.tooltips |
| 47 | +``` |
| 48 | + |
| 49 | +Now, tooltips will be rendered for the following elements: |
| 50 | + |
| 51 | +- __Content__ – elements with a `title`, permalinks and copy-to-clipboard button |
| 52 | +- __Header__ – home button, header title, color palette switch and repository link |
| 53 | +- __Navigation__ – links that are shortened with ellipsis, i.e. `...` |
| 54 | + |
| 55 | +[Insiders]: ../insiders/index.md |
| 56 | + |
| 57 | +## Usage |
| 58 | + |
| 59 | +### Adding tooltips |
| 60 | + |
| 61 | +The [Markdown syntax] allows to specify a `title` for each link, which will |
| 62 | +render as a beautiful tooltip when [improved tooltips] are enabled. Add a |
| 63 | +tooltip to an link with the following lines: |
| 64 | + |
| 65 | +``` markdown title="Link with title, inline syntax" |
| 66 | +[Hover me](https://example.com "I'm a tooltip!") |
| 67 | +``` |
| 68 | + |
| 69 | +<div class="result" markdown> |
| 70 | + |
| 71 | +[Hover me](https://example.com "I'm a tooltip!") |
| 72 | + |
| 73 | +</div> |
| 74 | + |
| 75 | +Tooltips can also be added to link references: |
| 76 | + |
| 77 | +``` markdown title="Link with title, reference syntax" |
| 78 | +[Hover me][example] |
| 79 | +
|
| 80 | + [example]: https://example.com "I'm a tooltip!" |
| 81 | +``` |
| 82 | + |
| 83 | +<div class="result" markdown> |
| 84 | + |
| 85 | +[Hover me](https://example.com "I'm a tooltip!") |
| 86 | + |
| 87 | +</div> |
| 88 | + |
| 89 | + [Markdown syntax]: https://daringfireball.net/projects/markdown/syntax#link |
| 90 | + [improved tooltips]: #improved-tooltips |
| 91 | + |
| 92 | +### Adding abbreviations |
| 93 | + |
| 94 | +Abbreviations can be defined by using a special syntax similar to [links] and |
| 95 | +[footnotes], starting with a `*` and immediately followed by the term or |
| 96 | +acronym to be associated in square brackets: |
| 97 | + |
| 98 | +``` markdown title="Text with abbreviations" |
| 99 | +The HTML specification is maintained by the W3C. |
| 100 | +
|
| 101 | +*[HTML]: Hyper Text Markup Language |
| 102 | +*[W3C]: World Wide Web Consortium |
| 103 | +``` |
| 104 | + |
| 105 | +<div class="result" markdown> |
| 106 | + |
| 107 | +The HTML specification is maintained by the W3C. |
| 108 | + |
| 109 | +*[HTML]: Hyper Text Markup Language |
| 110 | +*[W3C]: World Wide Web Consortium |
| 111 | + |
| 112 | +</div> |
| 113 | + |
| 114 | + [links]: #adding-tooltips |
| 115 | + [footnotes]: footnotes.md |
| 116 | + |
| 117 | +### Adding a glossary |
| 118 | + |
| 119 | +The [Snippets] extension can be used to implement a simple glossary by moving |
| 120 | +all abbreviations in a dedicated file[^1], and embedding it with the |
| 121 | +[`--8<--` notation][Snippets notation] at the end of each document: |
| 122 | + |
| 123 | + [^1]: |
| 124 | + It's highly recommended to put the Markdown file containing the |
| 125 | + abbreviations outside of the `docs` folder (here, a folder with the name |
| 126 | + `includes` is used), as MkDocs might otherwise complain about an |
| 127 | + unreferenced file. |
| 128 | + |
| 129 | +=== ":octicons-file-code-16: docs/example.md" |
| 130 | + |
| 131 | + ```` markdown |
| 132 | + The HTML specification is maintained by the W3C. |
| 133 | + |
| 134 | + --8<-- "includes/abbreviations.md" |
| 135 | + ```` |
| 136 | + |
| 137 | +=== ":octicons-file-code-16: includes/abbreviations.md" |
| 138 | + |
| 139 | + ```` markdown |
| 140 | + *[HTML]: Hyper Text Markup Language |
| 141 | + *[W3C]: World Wide Web Consortium |
| 142 | + ```` |
| 143 | + |
| 144 | + [Snippets notation]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/#snippets-notation |
0 commit comments