Skip to content

useFloating

A thin wrapper over @floating-ui/dom: positions a floating element next to a reference. Used internally by LxTooltip / usePopover.

Usage

ts
import { useFloating } from '@luxeanor/ui'

const { update } = useFloating(referenceEl, floatingEl, 'top')
// call after the floating element renders (usually after await nextTick()):
await update()

API

useFloating(reference: Ref<HTMLElement | null>, floating: Ref<HTMLElement | null>, placement: Placement = 'bottom-start'): { update: () => Promise<void> }

ParamDescription
referencereference element
floatingfloating element (result written to its style.left/top)
placement@floating-ui Placement (e.g. 'top', 'bottom-start')

Behavior: middleware fixed to offset(6) + flip() + shift({ padding: 8 }) — 6px gap, flips when short on space, shifts to avoid clipping; safely skips if an element disappears mid-computation.