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';

Then import storePopup in your root layout as well.

import { storePopup } from '@skeletonlabs/skeleton';

Finally, pass an object containing each of the required Floating UI modules to the store.

storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

Popups also support a number of optional Floating UI modules. These are only required if you use this middlware.

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

storePopup.set({ /* ... */ size, autoPlacement, hide, inline });

Events

The open and close state of the popup can be controlled by 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 while hovering the trigger element. Useful for creating tooltips.

Focus-Blur

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

Focus-Click

Shows the popup when the trigger is focused, hides when clicking outside. Supports the closeQuery feature.

Settings

Each popup requires their own unique popupSettings, which allow you to configure the following.

Placement

The popup can be set to appear in any of the four cardinal directions. This will flip when near the edge of the screen.

Close Query

Use the closeQuery setting to indicate what popup child items will close the popup when clicked. This is set to 'a[href], button' by default. Pass an empty string '' to disable.

State Callback

Provide a callback function to the state setting to be notified when the popup is opened or closed.

Middlware

Allows you to configure various Floating UI middleware settings such as shift, offset, and more.

Combobox

The goal of Skeleton is to combine primative elements and components to build more complex UI. For example, by combining a Button, Popup, and ListBox you can create a highly customizable combobox.

Z-Index Stacking

Please note that neither Skelton 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.