https://github.com/zachhannum/mkdocs-tooltipster-links-plugin

An MkDocs plugin that adds tooltips to preview the content of page links using tooltipster
https://github.com/zachhannum/mkdocs-tooltipster-links-plugin

Last synced: 2 months ago
JSON representation

An MkDocs plugin that adds tooltips to preview the content of page links using tooltipster

• Host: GitHub
• URL: https://github.com/zachhannum/mkdocs-tooltipster-links-plugin
• Owner: zachhannum
• License: mit
• Created: 2020-01-11T16:20:03.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-20T10:38:00.000Z (about 2 years ago)
• Last Synced: 2024-05-19T02:10:21.457Z (7 months ago)
• Language: Python
• Size: 1.22 MB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-docs - Tooltipster Links Plugin

README

        
# mkdocs-tooltipster-links-plugin

An MkDocs plugin that adds tooltips to preview the content of page links using tooltipster

![demo](demo/mkdocs_tooltipster_links_demo.gif)

## Setup

### Install the Plugin

Install the plugin using pip:

`pip install mkdocs-tooltipster-links-plugin`

Activate the plugin in `mkdocs.yml`:

```yaml

plugins:

  - search

  - tooltipster-links

```

> **Note:** If you have no `plugins` entry in your config file yet, you'll likely also want to add the `search` plugin. MkDocs enables it by default if there is no `plugins` entry set, but now you have to enable it explicitly.

More information about plugins in the [MkDocs documentation][mkdocs-plugins].

### Install Tooltipster

Please reference [Tooltipster's getting started guide](http://iamceege.github.io/tooltipster/#getting-started) for additional installation instructions.

Download Tooltipster and add the css and javascript to `mkdocs.yml`:

```yml

extra_css:

  - css/tooltipster.bundle.min.css

extra_javascript:

  - js/tooltipster.bundle.js  

```

Create custom directory and `main.html` file for overriding the `extra_head` template block

```sh

mkdir theme

touch theme/main.html

```

Add the following to `main.html`:

```html

{% extends "base.html" %}

{% block extrahead %}

        

        

                $(document).ready(function() {

                    $('.link-tooltip').tooltipster();

                });

        

{% endblock %}

```

Add the custom directory to `mkdocs.yml`:

```yml

theme:

  name: mkdocs

  custom_dir: theme

```

Add additonal css to the site (either in a new css file or existing one):

```css

.tooltip_templates { display: none; }

```

## Usage

Once configured property, tooltips-links should create tooltips automagically!

## See Also

More information about templates [here][mkdocs-template].

More information about blocks [here][mkdocs-block].

[mkdocs-plugins]: http://www.mkdocs.org/user-guide/plugins/

[mkdocs-template]: https://www.mkdocs.org/user-guide/custom-themes/#template-variables

[mkdocs-block]: https://www.mkdocs.org/user-guide/styling-your-docs/#overriding-template-blocks