Enveloppe/tooltips-internal-link

A simple js to add a tooltips that display an internal page's contents when hovering, for material mkdocs

Tooltips internal links

This little script allow you to "preview" your internal links, using the TippyJS Library, ala Wikipedia hovering, or like in Obsidian, for a material mkdocs wiki.

Its allow :

• Pop-hover footnote ;
• Link directly a preview of a part of the text using an anchor (title)
• Preview the entire file

Note : Link a particular part of the text doesn't work (ie it doesn't support Obsidian block-id). You need to link a title or a footnote.

Some preview :

→ See a Live Preview

Installation

First, you need to add wiki_hover.js & tippy.css in your assets (assets/js & assets/css) and edit your mkdocs.yml according :

extra_javascript:
  - assets/js/wiki_hover.js
extra_css:
  - assets/css/tippy.css

The second steps is to override your main.html. For more information about overriding template, check the material Mkdocs documentation.

So, you need :

1. To create an overrides folder
2. Add it to your mkdocs.yml in theme[custom_dir] as follow :

   theme:
   	name: 'material'
   	# keep the other things here !
       custom_dir: overrides

3. Create a main.html in overrides, with adding this contents :

{% extends "base.html" %}

{% block extrahead %}
  <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/translucent.css"/>
{% endblock %}

Now, normally, your good !