Popper for Svelte with actions, no wrapper components required!
npm install svelte-popperjs
!license
!build
Popper for Svelte with actions, no wrapper components or component bindings required!
Other Popper libraries for Svelte (including the official @popperjs/svelte library) use a wrapper component that takes the required DOM elements as props. Not only does this require multiple bind:this, you also have to pollute your script tag with multiple DOM references.
We can do better with Svelte actions!
``bash`
$ npm i -D svelte-popperjs
Since Svelte automatically bundles all required dependencies, you only need to install this package as a dev dependency with the -D flag.
createPopperActions takes an optional options object for configuring the popper instance, and returns a pair of actions to be used on the reference and popper elements.
The content action also takes an options object for updating the options of the popper instance.
A Svelte version of the standard tutorial.
`svelte
on:mouseenter={() => showTooltip = true}
on:mouseleave={() => showTooltip = false}
>
My button
{#if showTooltip}
API
$3
Popper options can be set statically when creating the popper actions, or dynamically on the content action.
If both are set, then the dynamic options will be merged with the initial options.
svelte
`$3
PopperJS allows the reference node to be a virtual element which is not mounted on the DOM and cannot be used with Svelte actions.
Despite this,
provides first-class support for virtual elements, and even supports reactive updates to the virtual element with Svelte stores.Here's an example creating a tooltip that follows the mouse cursor.
`svelte
Tooltip
`$3
If access is needed to the raw Popper instance created by the actions, you can reference the third element returned by
. The third element is a function that will return the current Popper instance used by the actions.Using the raw Popper instance to manually recompute the popper's position.
`svelte
``