useFloating

The main Hook of the library that acts as a controller for all other Hooks and components.

import { useFloating } from '@skeletonlabs/floating-ui-svelte';

Usage

The useFloating Svelte hook acts as a controller for all other Floating UI Svelte features. It handles positioning your floating elements (tooltips, popovers, etc.) relative to an anchored element. Automatically calculates the best placement and updates it as needed, providing access to properties for position and style.

const floating = useFloating({
	/* options */
});

html

<!-- Reference Element -->
<button bind:this="{floating.elements.reference}">
	Reference
</button>

<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	class="floating"
>
	Floating
</div>

Note

Destructured variables are not supported as this would break reactivity.

Options

`open`	Represents the open/close state of the floating element. boolean true
`onOpenChange`	Event handler that can be invoked whenever the open state changes. (open: boolean, event?: Event, reason?: OpenChangeReason) => void
`placement`	Where to place the floating element relative to its reference element. Placement 'bottom'
`strategy`	The type of CSS position property to use. Strategy 'absolute'
`middleware`	Supports all Floating UI middleware Array<Middleware \| undefined \| null \| false> undefined
`transform`	Whether to use transform instead of top and left styles to position the floating element. boolean true
`elements`	The reference and floating elements. FloatingElements {}
`whileElementsMounted`	Callback to handle mounting/unmounting of the elements. ((reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void) \| undefined undefined
`nodeId`	A unique node ID for the floating element when using a `FloatingTree`. string \| undefined undefined

Returns

`x`	The x-coord of the floating element. number
`y`	The y-coord of the floating element. number
`placement`	The stateful placement, which can be different from the initial placement passed as options. Placement
`strategy`	The stateful strategy, which can be different from the initial strategy passed as options. Strategy
`middlewareData`	Additional data from middleware. MiddlewareData
`isPositioned`	The boolean that let you know if the floating element has been positioned. boolean
`floatingStyles`	CSS styles to apply to the floating element to position it. string
`elements`	The reference and floating elements. FloatingElements
`update`	The function to update floating position manually. () => void
`context`	Context object containing internal logic to alter the behavior of the floating element. FloatingContext

Compare

Compare to Floating UI React.