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.

console 
npm install @floating-ui/dom

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

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

Then import storePopup in your root layout as well.

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

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

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

Events

The open and close state of the popup can be controlled by the event setting.

Click

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Click Content

Hover

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Hover Content

Focus-Blur

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Shows on focus, hides on blur.

Focus-Click

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Shows on focus, hides on click.

Settings

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

Placement

(TODO)

Close Query

(TODO)

State Callback

(TODO)

Middlware

(TODO)

Z-Index Stacking

Please note Floating-UI does not define a default z-index. You can, however, specify this for your data-popup element.

Accessibility

Use click or focus events when targeting mobile. Touch screens provide suboptimal support for hover.