🐛 Tooltip has wrong position if it has a parent with absolute position and moved transform

[DanielSidhion]

If the tooltip is added to an element that has a parent with absolute position + moved transform, it gets positioned in the wrong place.

Reproduction: https://svelte.dev/repl/0468e8f7712f4b4fbf33a14ff1be2f0e?version=4.2.8

Reading the code (#27) that fixed the initial issue (#25), it looks like if an offsetParent has absolute positioning, it would be easier to just position the tooltip assuming the parent's bounding client rect is the (0, 0) origin, and ignore any previous offsetParents that may exist in the tree. Basically, the code shouldn't expect left and top to determine the actual positioning of the element, but should still get the correct bounding rect using .getBoundingClientRect().

More context: I'm using Svelte Flow, and they define nodes with position: absolute, but move the nodes using transform: translate(...) instead of setting left and top.

[dysfunc]

#30 addresses this issue and fixes a bug introduced in the last change

[philmas]

It seems there is a bug, but perhaps can be addressed in a different manner. When I have a parent div relative of which a child having the tooltip prop and class absolute the tooltip works fine until the page is scrolled which messes up the position of the tooltip. Any thoughts on this?

[dysfunc]

Can you create a REPL with the issue?

[DanielSidhion]

@philmas My apologies, but I didn't understand well the scenario you mentioned. I tried creating a repro here with a few variations, and while I think those may have shown more bugs in the code, the behaviour was the same regardless of whether the page was scrolled or not.

[philmas]

Apologies, it is quite stupid to not show the example. I wrote down something quickly:

<script lang="ts">
	let name = 'world';
</script>

<div style="display:grid;">
	{#each Array(6) as _, i}
    <label style="position:relative; display:flex; background-color:#ccc;">
			<input
								type="radio"
				name="radio-input"
							/>
			<div>
				Some item
			</div>
			<div
								class="text-xs text-gray-500 bg-gray-100 h-8 w-8 hover:bg-gray-200 p-1 rounded-full absolute top-4 right-4"
								use:tooltip={{
									content: `<b>Description</b><p>No description available</p>`,
									position: 'top',
									animation: 'slide',
									arrow: true
								}}
							>
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
									<path
										fill="currentColor"
										d="M11 7v2h2V7zm3 10v-2h-1v-4h-3v2h1v2h-1v2zm8-5c0 5.5-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2s10 4.5 10 10m-2 0c0-4.42-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8"
									/></svg
								>
							</div>
		</label>
{/each}
</div>

Otherwise, I will come back to you when I have more time on my hands because I am not as handy with REPLs. This is basically the situation. I was able to omit the issue by not using relative/absolute :)