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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user