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;transform:translateY(-100%);`
|
||||||
: `position:fixed;top:${fixedTop}px;left:${fixedLeft}px;`,
|
: `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>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -63,6 +71,7 @@
|
|||||||
{@render children?.()}
|
{@render children?.()}
|
||||||
{#if showTooltip}
|
{#if showTooltip}
|
||||||
<div
|
<div
|
||||||
|
use:portal
|
||||||
role="tooltip"
|
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"
|
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}
|
style={tooltipStyle}
|
||||||
|
|||||||
Reference in New Issue
Block a user