Popups

Floating UI is a required dependency to enable Skeleton popup features.

npm install @floating-ui/dom

Configure Your Project

Import Floating UI into your root layout in /src/routes/+layout.svelte.

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

Then import storePopup from Skeleton.

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

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

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

Create a Popup

Create a PopupSettings object that maps to Floating UI settings.

let exampleSettings: PopupSettings = {
	// Set the event as: click | hover | hover-click
	event: 'click',
	// Provide a matching 'data-popup' value.
	target: 'examplePopup'
};

Apply the use:popup action to your trigger element.

<button ... use:popup={exampleSettings}>Trigger</button>

Apply a data-popup attribute to your desired popup element.

<div ... data-popup="examplePopup">(content)</div>

Append an .arrow class element within your popup, then apply a matching background color.

<div class="card variant-filled-secondary p-4" data-popup="examplePopup">
	Popup text.
	<!-- Append the arrow element -->
	<div class="arrow variant-filled-secondary" />
</div>

Placement

Reference the available placement options. This setting defaults to bottom.

let exampleSettings: PopupSettings = {
	// ...
	placement: 'bottom'
};

State Handler

You can optionally monitor the show and hide state of a popup using state.

let exampleSettings: PopupSettings = {
	// ...
	state: (e) => console.log(e)
};

Close Query

When using click events, this setting uses querySelectorAll to select all elements within the popup that will trigger a close event. By default this is set to 'a[href], button', which means clicking anchor or buttons within the popup will cause it to close.

let exampleSettings: PopupSettings = {
	// Limit to listbox items only:
	closeQuery: '.listbox-item',
};

You can provide Floating UI middleware settings within PopupSettings. These settings are passed verbatim.

let exampleSettings: PopupSettings = {
	// ...
	middleware: {
		// Floating UI Middlware
		/** https://floating-ui.com/docs/offset */
		offset: 24, // or { ... }
		/** https://floating-ui.com/docs/shift */
		shift: { ... },
		/** https://floating-ui.com/docs/flip */
		flip: { ... },
		/** https://floating-ui.com/docs/arrow */
		arrow: { ... }
	}
};

Accessibility

We recommend you favor the click event for mobile devices, as hover is not well supported.

Browser Support

Please be aware that there is a z-index bug for popups rendered over elements using backdrop-blur in some browsers. The popup will appear to be rendered behind the blurred element, even with an elevated z-index.