Utility

Popups

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

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

Demo

Skeleton

@SkeletonUI

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

100 Following 1000 Followers
View on Twitter

Installation

Required

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

terminal
npm install @floating-ui/dom

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

typescript
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.

typescript
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.

Click Content

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.

Hover Content

Focus-Blur

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

Shows on focus, hides on blur.

Focus-Click

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.


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.

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.

Middleware

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.

typescript
import { /* ... */ size, autoPlacement, hide, inline } from '@floating-ui/dom';
typescript
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

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.

css
[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.

html
<!-- Works ✅ -->
<div data-popup="popupStyled">
	<div class="flex">...</div>
</div>
html
<!-- 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.