Svelte Element Portal

Escape parent overflow by rendering an element over its ancestor ✌️

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.

Demo

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"

Top categories