Utility

Tooltips

Create tooltips using Floating UI. Use the Popups component if you want more advanced functionality.

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

Demo

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

Tooltip Settings

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

typescript 
let tooltipSettings: TooltipSettings = {
	placement: 'bottom'
};

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 tooltips rendered over elements using backdrop-blur in some browsers. The tooltip 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.