Design tooltip

[humitos]

There are some ideas already implemented in MediaWiki and GitHub from where we can base ours:

• https://meta.wikimedia.org/wiki/WMDE_Technical_Wishes/ReferencePreviews
• https://www.mediawiki.org/wiki/Page_Previews
• https://github.com/Justineo/github-hovercard

We are using this jQuery extension to render the tooltip: https://iamceege.github.io/tooltipster/ so, maybe a theme of it can be created or just adding an extra CSS file it's enough.

The first step for this issue is to create a design document explaining what content should be included in the tooltip, considering the possibilities of having different tooltips type (as GitHub does for PR, issues, user cards, etc) and showing mock examples of they would look like.

This document will help us to know if we need to change something in the API backend or the data that we are getting right now is enough.

We probably can have two instances of this design/implementation:

1. make it work with what we have already to look nice, but not perfect
2. grow from there expanding the design and modifying the backend

A help guide about how to write this document, could be this one: https://www.freecodecamp.org/news/how-to-write-a-good-software-design-document-66fcf019569c/

[humitos]

I started an initial implementation of this, just to make it "usable". Example at https://sphinx-hoverxref.readthedocs.io/en/latest/

There are not a lot more we can do regarding the structure of the content since we receive a HTML blob. In case we want to get the title, sections, paragraph, etc we will need to parse it on the client or modify the Read the Docs API endpoint.

[humitos]

Adding rst-content class to the tooltipster makes it render really nice inheriting all the style from Read the Docs theme.