Fix Tooltip overflow-hidden clipping via portal action

Portal the tooltip into document.body so overflow:hidden ancestors
can't clip it. Fixed positioning + getBoundingClientRect() for placement.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-16 15:25:18 +02:00
parent cbf0e4aa51
commit fa50617d3c
+9
View File
@@ -49,6 +49,14 @@
? `position:fixed;top:${fixedTop}px;left:${fixedLeft}px;transform:translateY(-100%);`
: `position:fixed;top:${fixedTop}px;left:${fixedLeft}px;`,
);
// Portal action: moves the node into document.body so overflow:hidden ancestors can't clip it.
function portal(node: HTMLElement) {
document.body.appendChild(node);
return {
destroy() { node.remove(); },
};
}
</script>
<div
@@ -63,6 +71,7 @@
{@render children?.()}
{#if showTooltip}
<div
use:portal
role="tooltip"
class="z-[9999] px-3 py-2 text-xs font-normal text-stein-0 bg-stein-800 rounded-xs shadow-lg min-w-56 max-w-88 text-center pointer-events-none whitespace-normal"
style={tooltipStyle}