
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
svelte-floating-ui
Advanced tools
Floating UI for Svelte with actions. No wrapper components or component bindings required!
npm install svelte-floating-ui
pnpm install svelte-floating-ui
yarn add svelte-floating-ui
createFloatingActions
takes an optional options object for configuring the content placement. The content action also takes an optional options object for updating the options of the content placement.
createFloatingActions
also returns an update
method as it's third value which can be used to manually update the content position.
<script lang="ts">
import { offset, flip, shift } from "svelte-floating-ui/dom";
import { createFloatingActions } from "svelte-floating-ui";
const [ floatingRef, floatingContent ] = createFloatingActions({
strategy: "absolute",
placement: "top",
middleware: [
offset(6),
flip(),
shift(),
]
});
let showTooltip = $state(false);
</script>
<button
onmouseenter={() => showTooltip = true}
onmouseleave={() => showTooltip = false}
use:floatingRef
>Hover me</button>
{#if showTooltip}
<div style="position:absolute" use:floatingContent>
Tooltip
</div>
{/if}
Floating UI options can be set statically when creating the 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 [ floatingRef, floatingContent ] = createFloatingActions(initOptions);
</script>
<!-- will be merged with initOptions -->
<div use:floatingContent={ dynamicOptions }/>
The content element's position can be manually updated by using the third value returned by createFloatingActions
. This method takes an optional options object which will be merged with the initial options.
<script>
// Get update method
const [ floatingRef, floatingContent, update] = createFloatingActions(initOptions);
update(updateOptions)
</script>
You can use autoUpdate options directly in initOptions for createFloatingActions or floatingContent, but not in update
<script>
import { offset, flip, shift } from "svelte-floating-ui/dom";
import { createFloatingActions } from "svelte-floating-ui";
const [ floatingRef, floatingContent ] = createFloatingActions({
strategy: "absolute",
placement: "top",
middleware: [
offset(6),
flip(),
shift(),
],
autoUpdate: { // or false to disable everything
ancestorResize: false,
elementResize: false
}
});
</script>
What values can autoUpdate have?
Partial<Options>
/**
* false: Don't initialize autoUpdate;
* true: Standard autoUpdate values from the documentation;
* object: All as in the autoUpdate documentation. Your parameters are added to the default ones;
* @default true
*/
autoUpdate?: boolean | Partial<Options>
Svelte Floating UI allows you to use the floatingRef
(reference node) like VirtualElement
This is an example of creating a tooltip that runs behind the mouse cursor:
<script lang='ts'>
import type { ClientRectObject } from 'svelte-floating-ui/dom'
import { createFloatingActions, createVirtualElement, type CreateVirtualElementOptions } from 'svelte-floating-ui'
const [floatingRef, floatingContent] = createFloatingActions({
strategy: 'fixed', //or absolute
})
let x = $state(0)
let y = $state(0)
const handleMouseMove = (ev: MouseEvent) => {
x = ev.clientX
y = ev.clientY
}
const getBoundingClientRect: ClientRectObject = $derived({
x,
y,
top: y,
left: x,
bottom: y,
right: x,
width: 0,
height: 0
});
const virtualElement = createVirtualElement({ getBoundingClientRect });
$effect(() => {
virtualElement.update({ getBoundingClientRect });
});
floatingRef(virtualElement)
</script>
<svelte:window onmousemove={handleMouseMove}/>
<main>
<h2 use:floatingContent>Magic</h2>
</main>
To apply styles manually, you can pass the onComputed
option to createFloatingActions
. This is a function that recieves a ComputePositionReturn
. This function is called every time the tooltip's position is computed.
See Arrow Middleware for an example on it's usage.
For convenience, a custom Arrow middleware is provided. Rather than accepting an HTMLElement
, this takes a Writable<HTMLElement>
(createArrowRef
). Otherwise, this middleware works exactly as the regular Floating UI one, including needing to manually set the arrow styles.
To set the styles, you can pass the onComputed
option. The below implementation is copied from the Floating UI Tutorial.
<script lang="ts">
import { arrow, createArrowRef, createFloatingActions } from 'svelte-floating-ui';
const arrowRef = createArrowRef();
let showTooltip = $state(true);
const [floatingRef, floatingContent] = createFloatingActions({
strategy: 'absolute',
placement: 'bottom',
middleware: [arrow({ element: arrowRef })],
onComputed({ placement, middlewareData }) {
if ($arrowRef) {
const { x, y } = middlewareData.arrow || {};
const staticSide =
{
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right'
}[placement.split('-')[0]] ?? 'top';
Object.assign($arrowRef.style, {
left: x != null ? `${x}px` : '',
top: y != null ? `${y}px` : '',
[staticSide]: '-4px'
});
}
}
});
</script>
<main>
<button
onmouseenter={() => (showTooltip = true)}
onmouseleave={() => (showTooltip = false)}
use:floatingRef>Hover me</button
>
{#if showTooltip}
<div class="tooltip" use:floatingContent>
Tooltip this is some longer text than the button
<div class="arrow" style="position: absolute;" bind:this={$arrowRef}>^</div>
</div>
{/if}
</main>
Thanks to TehNut/svelte-floating-ui for the foundation for this package
FAQs
Svelte actions for working with floating ui
The npm package svelte-floating-ui receives a total of 30,537 weekly downloads. As such, svelte-floating-ui popularity was classified as popular.
We found that svelte-floating-ui demonstrated a healthy version release cadence and project activity because the last version was released less than 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
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.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.