Create floating popups, menus, and tooltips using the power of Floating UI.

import { popup } from '@skeletonlabs/skeleton';
import type { PopupSettings } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA Floating UI




Skeleton is a fully featured UI component library using the power of Svelte + Tailwind.

100 Following 1000 Followers
View on Twitter



To begin, install Floating UI from NPM. This is required for popups to function.

npm install @floating-ui/dom

Import Floating UI into your application's root layout /src/routes/+layout.svelte.

import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';

Import storePopup in your root layout, then pass an object containing the required Floating UI modules shown below.

import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });


You can control how the popup is opened and closed by using the event setting.


Tap the trigger element to open the popup, then outside to close it. Supports the closeQuery feature.

Click Content


The popup shows only while hovering the trigger element. Great for creating tooltips.

Be sure to disable pointer events for children (ex: icons) within your trigger element. These may cause the popup to flash or close early. We recommend applying [&>*]:pointer-events-none to your trigger element to resolve this.

Hover Content


Shows the popup only while the trigger element has focus. Useful for showing tooltips while focusing an input.

Shows on focus, hides on blur.


Show the popup on focus, closed when clicking outside. Useful for autocomplete popups. Supports the closeQuery feature.

Shows on focus, hides on an outside click.


In addition to event, let's explore what other popupSettings are available.


Defines which side of the trigger the popup will appear. This will automatically flip when near the edge of the screen.

Shown on the bottom

Close Query

Use the closeQuery setting to indicate what child elements within the popup can trigger the popup to close. By default this uses 'a[href], button' to denote anchors and buttons. You may provide a custom query or set '' to disable this feature.

State Callback

Provide a callback function to be notified when a particular popup is opened or closed.

Check your console log to view the value.


Use middleware to configure Floating UI middleware such as shift, offset, and more.

This popup has an offset of 24 px.

This includes support for the optional Floating UI middleware shown below. To use these, import the Floating UI modules and pass them to the storePopup in your root layout as shown below. Note that these may alter the default behavior of your popups. We recommend these only for advanced users.

import { /* ... */ size, autoPlacement, hide, inline } from '@floating-ui/dom';
storePopup.set({ /* ... */ size, autoPlacement, hide, inline });

Handling Loops

Popups maintain a 1-1 relationship between the trigger and the popup element. This means when using #each block to iterate and create a set of popups, you must provide a unique popup element and popup settings.

Popup A
Popup B
Popup C


The goal of Skeleton is to combine primitive elements and components in order to generate more complex interfaces. For example, by combining a Button, Popup, and ListBox you can create a highly customizable combobox.

Avoiding Style Conflicts

Please use caution when adjusting the default styling for the [data-popup] element. Specifically in regards to the inherent display, position, and transition properties. These are critical for ensuring the popup loads and displays as expected.

[data-popup] {
	/* Display */
	display: none;
	/* Position */
	position: absolute;
	top: 0;
	left: 0;
	/* Transitions */
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	transition-duration: .15s

Use a child element to introduce new classes and avoid overwriting default values.

<!-- Works ✅ -->
<div data-popup="popupStyled">
	<div class="flex">...</div>
<!-- Breaks ❌ -->
<div class="flex" data-popup="popupStyled">

Z-Index Stacking

Please note that neither Skeleton nor Floating-UI define a default z-index for popups.


Use click or focus events when targeting mobile. Touch screens do not fully support hover.