Tippyjs: Tooltip offset when body position is relative and has margin

[NilsEnevoldsen]

https://codepen.io/anon/pen/OZPJZm

The tooltip is offset when the body position is relative and has margin.

It might be related to https://github.com/FezVrasta/popper.js/issues/188.

[NilsEnevoldsen]

I see, this is already #190. What's the best workaround if I can't control the body? (I'm writing a MediaWiki extension, so I can't muck up other peoples' wikis.)

[atomiks]

Try appendTo: reference.parentNode rather than the body?

[NilsEnevoldsen]

appendTo: reference.parentNode: "ReferenceError: Can't find variable: reference"

appendTo: document.querySelector('.tooltip').parentNode: Tooltip is still offset.

Am I typing the wrong thing?

[atomiks]

Sorry, reference is what you're passing to tippy() i.e. tippy(reference) (if it's a DOM node, rather than a string).

Edit: so yeah I checked the pen.

I don't think there's a solution to this unless Popper fixes it. Is there an open issue for this particularly?

[NilsEnevoldsen]

Is there a workaround assuming that I know the margin, via something cludgy like bodyMarginTop = window.getComputedStyle( document.body ).getPropertyValue( 'margin-top' )? I've been trying to make it work with offset, but the flip behavior means it works when above or below, but never both.

[NilsEnevoldsen]

My workaround was to use CSS positioning on the Popper rather than using offset. https://github.com/NilsEnevoldsen/ScryfallLinks/commit/8c6131d4d0f43f05b2b482d4e1b07d5841370e6f

[atomiks]

Closing Popper.js-related bugs, previously left them open for visibility.

If you experience problems with positioning please create an issue over at the Popper.js repo: https://github.com/FezVrasta/popper.js/issues

[NilsEnevoldsen]

Appears to be fixed in (at least) popper.[email protected].