# svelte-element-portal

> Escape parent overflow by rendering an element over its ancestor :v:

Latest version **0.2.0** (published 2022-11-25) · 0 weekly downloads

## Install

```sh
npm install svelte-element-portal
pnpm add svelte-element-portal
yarn add svelte-element-portal
bun add svelte-element-portal
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-11-25 |
| First published | 2022-03-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | nwaughachukwuma |
| Keywords | portal, svelte, svelte-element-portal, escape overflow, escape parent overflow |

## Links

- npm: https://www.npmjs.com/package/svelte-element-portal
- Repository: https://github.com/nwaughachukwuma/svelte-element-portal
- Homepage: https://github.com/nwaughachukwuma/svelte-element-portal#readme
- Issues: https://github.com/nwaughachukwuma/svelte-element-portal/issues
- npm.io page: https://npm.io/package/svelte-element-portal

## Recent versions

- 0.2.0 (latest) — 2022-11-25
- 0.1.1 — 2022-04-03
- 0.1.0 — 2022-04-03
- 0.0.5 — 2022-04-02
- 0.0.4 — 2022-03-27
- 0.0.3 — 2022-03-27
- 0.0.2 — 2022-03-27
- 0.0.1 — 2022-03-27

## README

# 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](https://svelte.dev/repl/1496bee2c5d642b0baa8158c33cc1d16?version=3.46.6)

## Usage

```svelte
<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"

---
_Source: https://npm.io/package/svelte-element-portal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
