Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show tooltips in text for glossary terms and permalinks for definitions #540

Open
stevepiercy opened this issue Sep 24, 2021 · 10 comments
Open

Comments

@stevepiercy
Copy link
Contributor

From #506 (comment)

There are several possible implementations.

It appears that the downside of all these implementations is that they require the docs to reside on a server for the tooltip to make an XHR to grab the content from the reference. Else it's a lot of copy-paste for each instance of a term.

IMO this is too much work with not enough benefit, when users can open a link to a term in a new window or tab.

Instead I would suggest that we implement a custom style to indicate that a link is to a term in the Glossary. I think a dashed underline is typical for that.

@ksuess
Copy link
Member

ksuess commented Sep 24, 2021

+1 from me. That sounds as a good way to go: just to style the terms with a dashed underline. The link is already generated.

Apart from this, my ideal situation would be

@ksuess ksuess added this to the Relaunch milestone Sep 24, 2021
@stevepiercy
Copy link
Contributor Author

I gave it a shot, but unfortunately the markup for all links that are internal to the docs use the same class of reference internal.

<a class="reference internal" href="../glossary.html#term-React">
  <span class="xref std std-term">React</span>
</a>

There is currently no parent selector, according to this recent Stack Overflow post.

We can either close this issue as "won't fix", or wait until the standards settle and get adopted by web browsers.

@ksuess
Copy link
Member

ksuess commented Sep 24, 2021

+1 for won't fix (terms get generated link to glossary per default, that's good)
-1 for tooltips for explicit marked terms (marked by directive "terms" https://training.plone.org/5/contributing/writing-docs-guide.html#glossary-terms) and reopen the topic for volunteer that wants to implement

  • parsing text for glossary terms
  • grab glossary
  • fit matched strings with tooltip

@stevepiercy
Copy link
Contributor Author

There is a new release of https://sphinx-hoverxref.readthedocs.io/en/latest/ that now allows references to non-RTD hosted sites.

https://app.mailerlite.com/b7u3f8

@stevepiercy
Copy link
Contributor Author

@ksuess what do you think of this implementation? https://sphinx-hoverxref.readthedocs.io/en/latest/usage.html#tooltip-on-glossary-terms

sphinx-hoverxref allows tooltips for glossary terms with no additional markup, just a configuration item. It also allows it for other objects.

@ksuess
Copy link
Member

ksuess commented Mar 14, 2022

@stevepiercy, this looks pretty good, but…. I set it up locally. If I'm not completely wrong, there is a limitation to readthedocs hosting. The tooltip content is loaded as https://readthedocs.org/api/v3/embed/?doctool=sphinx&doctoolversion=4.4.0&url=http://localhost:8000/glossary.html#term-TTW, which fails with 400 error | "External domain not allowed.
The other small minus: A clash with .tooltip of Bootstrap could be solved.

@ksuess
Copy link
Member

ksuess commented Mar 14, 2022

Another approach could be the way collective.glossary will do:
Provide the glossary in JSON format like

[
    {
        "term": "AUTODAT",
        "description": "<p>Automatischer Datenaustausch in Kompass.</p>"
    },
    {
        "term": "Achtung",
        "description": "<p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam.<strong><strong>.</strong></strong></p><h4><strong><strong>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</strong></strong></h4><p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>"
    },
]

And jquery.glossarizer to automatically markup glossary terms on a page and display definitions as a tooltip.
https://github.com/PebbleRoad/glossarizer

The json could be generate as pre-commit hook?

@stevepiercy
Copy link
Contributor Author

stevepiercy commented Mar 14, 2022

@stevepiercy, this looks pretty good, but…. I set it up locally. If I'm not completely wrong, there is a limitation to readthedocs hosting.

Oh, bummer, you are correct.

https://sphinx-hoverxref.readthedocs.io/en/latest/installation.html

Warning
This extension requires a backend server to retrieve the tooltip content. Currently, only Read the Docs is supported as backend server. Take into account that your documentation has to be hosted on Read the Docs for this extension to work.

jquery.glossarizer

Are links still clickable? I cannot tell because the demo has # for the href.

@stevepiercy
Copy link
Contributor Author

It appears that trying to implement sphinx-hoverxref for static sites increases page load times significantly.

@stevepiercy
Copy link
Contributor Author

This one actually does not require a server, but the theme itself appears to generate the necessary markup for glossary terms. See:

https://github.com/vsajip/sphinx_sizzle_theme/blob/cf40cd3725b2c578d3029640ae4c28d264addf67/sphinx_sizzle_theme/__init__.py#L576-L603

As a bonus, it could work on docstrings, too, with the use of pdoc to automatically generate a JSON file, as @ksuess mentioned. pdoc appears to work only on docstrings, though, and not glossary terms.

Double bonus: permalinks for Glossary terms. I would love this.

@stevepiercy stevepiercy changed the title Show tooltips in text for glossary terms Show tooltips in text for glossary terms and permalinks for definitions May 15, 2023
@stevepiercy stevepiercy moved this from New to Todo in Release Plone 6 docs May 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Todo
Development

No branches or pull requests

2 participants