Utility

Popups

Create floating menus and tooltips using Floating UI.

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

Demo

This is an example tooltip.

Skeleton

@SkeletonUI

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

50 Following 440 Followers
View on Twitter

Getting Started

Install Floating UI from NPM. This is required.

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

Popup Settings

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

typescript 
let popupSettings: PopupSettings = {
	placement: 'bottom'
};

Focus Event

Use the focus event to display popups while the trigger element is focused. Likewise use focus-click to toggle the popup even when tapping the same trigger element repeatedly.

Click outside to close.
Click the input or outside to close.

Combobox

By combining popups and Skeleton listboxes we can create a functional combobox element. We can use the focus-click event so it opens for keyboard users when focussed.

Z-Index

Neither Skeleton nor Floating-UI will provide a Z-Index out of the box for the reasons layed out in the Floating-UI docs.

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.

Accessibility

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