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

[Liam-DeVoe]

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:

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

[humitos]

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

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]

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]

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

[humitos]

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

[Liam-DeVoe]

confirmed working, thanks!