svelte-element-portal
v0.2.0
Published
Escape parent overflow by rendering an element over its ancestor :v:
Downloads
26
Maintainers
nwaughachukwumaReadme
Svelte-Element-Portal
Make an element escape its parent overflow by rendering it over an ancestor element in the DOM :v:. This is useful for rendering a tooltip or popover in place, over an element whose parent overflow is hidden.
Usage
<script>
import ElementPortal from 'svelte-element-portal';
</script>
<body>
<main>
<div id="target" />
<div style="overlow: hidden">
<ElementPortal target="#target" let:showItem let:hideItem>
<div
on:pointerenter={showItem}
on:pointerleave={hideItem}>
Item 1
</div>
<tooltip slot="item" />
</ElementPortal>
</div>
</main>
</body>🥢 Props
target
HTMLElement or selector, which must have a defined position := relative. Defaults to "body"