Popups

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 });

Events

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

Click

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

Hover

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.

Focus-Blur

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

Focus-Click

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

Settings

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

Placement

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

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.

Middleware

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

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.

Combobox

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>
</div>

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

Z-Index Stacking

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

Accessibility

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