Make the style match furo theme

[humitos]

When using sphinx-hoverxref with furo theme, it does not look great. It seems we need to add some adjustments via CSS as we do for some of the other themes. See

sphinx-hoverxref/hoverxref/extension.py

Lines 285 to 287 in 34c8a3c

	elif theme == 'sphinx_rtd_theme':
	if app.config.hoverxref_modal_class == default:
	css_file = 'css/sphinx_rtd_theme.css'

(the screenshot is taken from this project https://crest.readthedocs.io/en/latest/user/configuration.html#configuration)

I'm cc'ing @pradyunsg just because he is the author of the furo theme 👋🏼

[pradyunsg]

I'm happy to add dedicated CSS for this in Furo, FWIW.

Furo already generates a CSS file for overriding extensions' styles, so this would work just fine with that and avoid an additional network request in those cases.

[humitos]

I opened #189 as a quick fix for the h html tags inside the tooltip which seems to work fine. However, as I don't have good CSS skills I don't know if it's the correct way of doing it.

I'm 👍🏼 on adding CSS for this directly in Furo. Let me know if I can help somehow with that. I haven't checked Furo's code, but if you want me to open a PR there and continue the conversation on the PR itself, just point me to the file I need to start reading to make the changes 😄

Do you think it is worth merging this PR and adding this small CSS code to the next release or it's better/cleaner to wait for the code to be part of Furo itself?

[pradyunsg]

If you want to file a PR for this in Furo:

• Add a Sass file in https://github.com/pradyunsg/furo/tree/main/src/furo/assets/styles/extensions and import it from the index file in there.
• Pick a documentation set that renders with Furo.
• In a clean virtualenv, do a pip install -e <path-to-furo> "sphinx-theme-builder[cli]"
• Install any documentation specific dependencies (eg: extensions).
• Run stb serve <path-to-some-other-docs>, which will start a live-reloading server that watches the Furo sources (you need to run this from Furo's root directory). Make code changes, save -- Furo's assets will be compiled, the documentation will be rebuilt and any open browser tabs will be reloaded.

I think shipping this with Furo directly is a better approach, since it avoids any back-and-forth for the responsibility for this.

[humitos]

@pradyunsg thanks a lot for such detailed steps!

I followed all of them and work on the fix. Then I realized that the problem is at that project in particular 🤦🏼 . It seems they are adding some extra CSS that changes the h1 somehow because. Their h1 is thinner than the one that comes with furo by default --so, I guess they have something else that breaks the tooltip style as well.

This is an example with plain furo setup and no extra CSS added in my own project, which looks great:

[pradyunsg]

Neato. Anything actionable here then? That looks like line-height was set.

[humitos]

No. I'm closing this issue. Thanks a lot for your help, your interest, and the detailed instructions to work on furo. It was pretty simple to do, and test, what I wanted to do on that stack 💯