Getting Started

Floating UI Svelte is a library that helps you create floating elements such as tooltips, popovers, dropdowns, and more.

Requirements

Supports projects created using Svelte v5.

Install

Install Floating UI Svelte using your package manager of choice.

bash

npm install @skeletonlabs/floating-ui-svelte
# pnpm install @skeletonlabs/floating-ui-svelte
# yarn install @skeletonlabs/floating-ui-svelte
# bun install @skeletonlabs/floating-ui-svelte

Both @floating-ui/dom and @floating-ui/utils will be automatically installed as dependencies.

CSS Styles

Making elements "float"

At minimum, the following styles must be applied to ensure floating elements do not disrupt the flow of the document. This can be handled using a single reusable CSS class.

css

.floating {
	width: max-content;
	position: absolute;
	top: 0;
	left: 0;
}

html

<div class="floating">Some floating element.</div>

Z-Index Stacking

Please be aware that Floating UI does not take an opinionated stance on z-index stacking.

Caveats

Server-Side Rendering (SSR)

When SSR is enabled and the floating element is visible upon page load it will first be positioned in the top left of your screen. It will remain until the position is calculated. To prevent this, you may utilize the isPositioned prop returned from the useFloating hook:

svelte

<script lang="ts">
	import { useFloating } from '@skeletonlabs/floating-ui-svelte';

	const floating = useFloating();
</script>

<!-- Floating element is always rendered -->
<div class="floating" bind:this={floating.elements.floating} style={floating.floatingStyles}>
	<!-- The content of the floating element is shown once `isPositioned` is true -->
	{#if floating.isPositioned}
		Floating
	{/if}
</div>