Improve CSS UX of links

readthedocs / sphinx-hoverxref

Sphinx extension to show tooltips with content embedded when hover a reference.

https://sphinx-hoverxref.readthedocs.io/

MIT License

95 stars 40 forks source link

Improve CSS UX of links #215

Open ericholscher opened 2 years ago

ericholscher commented 2 years ago

I'd love to have a more visible UX indicator that a link on the page is hoverxref-enabled. I'd love a very obvious custom underline CSS style, as a start. Perhaps also an optional icon at the end of the link? Many sites do this for badging external links, so could be something similar.

This should also be documented for theme authors so they can make similar UX updates.

humitos commented 2 years ago

We talked about this some time ago and I suggested to use a small 💡 icon. See https://github.com/readthedocs/sphinx-hoverxref/issues/11#issuecomment-609042369

It should not be hard to make this change, but I'd like to receive some feedback and opinions about the style/look&feel to make it good under different circumstances.

humitos commented 1 year ago

I found this nice idea in https://myst.tools/sandbox

Peek 2023-01-09 11-33

you have to click, so it's not hover
that makes it to work on mobile
it changes the cursor to a magnifier with a plus sign inside it
the popup shows a link at the top right to go directly to that section
you have to click outside to make it disappear