
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
svelte-popperjs
Advanced tools
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!
$ 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.
<script>
import { createPopperActions } from 'svelte-popperjs';
const [popperRef, popperContent] = createPopperActions({
placement: 'right',
strategy: 'fixed',
});
const extraOpts = {
modifiers: [
{ name: 'offset', options: { offset: [0, 8] } }
],
};
let showTooltip = false;
</script>
<button
use:popperRef
on:mouseenter={() => showTooltip = true}
on:mouseleave={() => showTooltip = false}
>
My button
</button>
{#if showTooltip}
<div id="tooltip" use:popperContent={extraOpts}>
My tooltip
<div id="arrow" data-popper-arrow />
</div>
{/if}
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.
<script>
// set once and no longer updated
const [popperRef, popperContent] = createPopperActions(initOptions);
</script>
<!-- will be merged with initOptions -->
<div use:popperContent={dynamicOptions}/>
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, svelte-popperjs
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.
<script>
import { writable } from 'svelte/store';
import { createPopperActions } from 'svelte-popperjs';
const [popperRef, popperContent] = createPopperActions({
strategy: 'fixed',
});
let x = 0;
let y = 0;
const mousemove = (ev: MouseEvent) => {
x = ev.clientX;
y = ev.clientY;
}
$: getBoundingClientRect = () => ({
width: 0, height: 0,
top: y, bottom: y,
left: x, right: x,
});
const virtualElement = writable({ getBoundingClientRect });
$: $virtualElement = { getBoundingClientRect };
popperRef(virtualElement);
</script>
<svelte:window on:mousemove={mousemove} />
<main>
<div use:popperContent>Tooltip</div>
</main>
If access is needed to the raw Popper instance created by the actions, you can reference the third element returned by createPopperActions
. 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.
<script>
import { createPopperActions } from 'svelte-popperjs';
const [popperRef, popperContent, getInstance] = createPopperActions();
async function refreshTooltip() {
const newState = await getInstance().update();
}
</script>
FAQs
Popper for Svelte with actions, no wrapper components required!
The npm package svelte-popperjs receives a total of 5,040 weekly downloads. As such, svelte-popperjs popularity was classified as popular.
We found that svelte-popperjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.