Skip to content

Link preview of a link inside an h2 incorrectly inherits h2 styling for preview content? #584

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

Closed
tybug opened this issue May 28, 2025 · 5 comments · Fixed by #592
Closed
Assignees

Comments

@tybug
Copy link

tybug commented May 28, 2025

Hi! We just moved the Hypothesis documentation from sphinx-hoverxref to the Link Preview addon. After doing so, I noticed that some of the tooltips display poorly:

Image

https://hypothesis.readthedocs.io/en/latest/index.html

Where the link is inside an h2, and the data-linkpreview-href tooltip div is placed inside of that containing h2 element, meaning the entire tooltip content inherits the h2's font size / font weight / etc styles.

I checked other preview links inside headers, like the @given link in this header, but those appended the tooltip to a root readthedocs-linkpreviews element and display fine, since they don't inherit the h2 styles.

I'm not sure what is causing the behavior difference here, but I'm hoping you guys have some idea!

A confounding factor is that on the page where the tooltip div displays poorly, we have some custom css (source). I tried disabling these styles locally in devtools, to no visible effect, but perhaps their mere presence changes the build process for readthedocs somehow?

Hypothesis issue: HypothesisWorks/hypothesis#4347

@github-project-automation github-project-automation bot moved this to Planned in 📍Roadmap May 28, 2025
@humitos humitos self-assigned this May 28, 2025
@humitos
Copy link
Member

humitos commented Jun 2, 2025

I tried just moving the tooltip generated outside the h2 as a sibling of it and the tooltip renders properly.

Image

Checking the code where we create the tooltip and inject it into the DOM at: https://github.com/readthedocs/addons/blob/main/src/linkpreviews.js#L184-L198, it seems that we are using https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement with afterend and the element being the h2 -- I understand the tooltip created should be after the closing h2, right?

I quickly check the source of the page and I found Firefox telling me the page is malformed. It has a closing </meta> and a few </input> that shouldn't be there. I'm guessing that maybe our code is confused because of that, 🤔 ?

@humitos
Copy link
Member

humitos commented Jun 2, 2025

I found the issue. The tooltip is added as sibling of the a element, and that a element is inside the h2 -- resulting in the tooltip being added inside the h2. A workaround could be to check if the parent of the a element is a h* type element, and in that case add the tooltip as a sibling of the h* element. I will open a PR with this behavior and see how it behaves.

humitos added a commit that referenced this issue Jun 2, 2025
@humitos humitos moved this from Planned to Needs review in 📍Roadmap Jun 2, 2025
@humitos
Copy link
Member

humitos commented Jun 2, 2025

I simplify this by always adding the tooltip before closing the body element 👍🏼

@github-project-automation github-project-automation bot moved this from Needs review to Done in 📍Roadmap Jun 3, 2025
@humitos
Copy link
Member

humitos commented Jun 3, 2025

We deployed the fix. It should work as expected now.

@tybug
Copy link
Author

tybug commented Jun 3, 2025

confirmed working, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants