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

Combobox

By combining popups and Skeleton listboxes we can create a functional combobox element.

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.