Mein Tooltip arbeitet nicht auf Android, da GetboundingClientRect 0 zurückkehrt ⇐ CSS

[Anonymous]

Ich implementiere eine Tooltip -Funktion auf meiner Seite und stieß auf ein bestimmtes Problem auf Android -Geräten. Während die Tooltips perfekt auf Desktop, iOS und sogar in Browserfenstern der Größe geeignet sind, verhalten sie sich bei Android falsch. < /P>
beim Drücken auf '?' (In Repl oder Code unten) positioniert in der Nähe der rechten Rande des Bildschirms auf Android erstreckt sich der Tooltip außerhalb des Bildschirms, anstatt sich selbst ordnungsgemäß zu positionieren. Dieses Verhalten ist einzigartig für Android - ich kann es auf einer anderen Plattform nicht reproduzieren, da nur dort Rec.Right Null ist. />https://svelte. Ich habe einige Protokolle für Rect.Right hinzugefügt, die immer 0 auf Android erscheint. < /P>

Code: Select all

 
let name = 'world';
import { onMount } from 'svelte';
let amount = 50

function adjustTooltipPosition(event) {
// Get the specific tooltip related to this hover event
const group = event?.currentTarget || event;
const tooltip = group.querySelector('.pointer-events-none');

if (!tooltip) return;

tooltip.style.opacity = '0';

// Reset position first
tooltip.style.left = '50%';
tooltip.style.right = 'auto';
tooltip.style.transform = 'translateX(-50%)';

// wait for animation?
// Get tooltip position after reset
const rect = tooltip.getBoundingClientRect();
const viewportWidth = window.innerWidth;

// If tooltip extends beyond right edge
if (rect.right > viewportWidth - 10) {
tooltip.style.left = 'auto';
tooltip.style.right = '0';
tooltip.style.transform = 'none';
}

// If tooltip extends beyond left edge
if (rect.left < 10) {
tooltip.style.left = '0';
tooltip.style.right = 'auto';
tooltip.style.transform = 'none';
}

tooltip.style.opacity = '1';
// tooltip.classList.add("flex");
// tooltip.classList.remove("hidden");
}

// could also use on:pointerenter={adjustTooltipPosition}
onMount(() => {
const groups = document.querySelectorAll('.group');
groups.forEach((group) => {
group.addEventListener('pointerenter', adjustTooltipPosition);
});

return () => {
groups.forEach((group) => {
group.removeEventListener('pointerenter', adjustTooltipPosition);
});
};
});







{#each {length: amount} as _, i}


Something

?


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.




{/each}




.tooltip-content {
width: 16rem;
max-width: calc(100vw - 20px);
}