Create floating menus and tooltips using Floating UI.

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


This is an example tooltip.



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.

npm install @floating-ui/dom

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

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

Then import storePopup in your root layout as well.

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

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

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

Popup Settings

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

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.


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.


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.


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