Floating
A Floating UI wrapper component for positioning elements like tooltips, popovers, or dropdowns dynamically, ensuring they stay visible and aligned relative to a reference element.
API Reference
FloatingProps
Extends all the standard HTML attributes of the `<div>` element.
| Property | Type | Default | Description |
|---|---|---|---|
ref $bindable | HTMLDivElement | Reference to the rendered DOM element. | |
isOpen $bindable | boolean | Manage/listen open state | |
onClose | function | Callback when floating is closed | |
size | union | "3" | Floating size |
color | union | Floating color | |
variant | union | "solid" | Floating variant |
outline | boolean | false | Floating outline |
radius | union | Floating radius | |
autoUpdate | boolean | false | Updateposition on scroll |
placement | union | "top" | Prefered placement |
offset | number | 0 | Floating offset from target |
arrow | boolean | false | Show arrow |
arrowWidth | number | Arrow width (only if arrow is true) | |
arrowHeight | number | Arrow height (only if arrow is true) | |
arrowTipRadius | number | FloatingArrow tip radius | |
flip | boolean | false | Use flip floating middleware |
shift | boolean | false | Use shift floating middleware |
hide | boolean | false | Use hide floating middleware |
backdrop | boolean | false | Show backdrop |
portal | boolean | false | Enable portal rendering |
portalTarget | string | "[data-theme-root]" | Portal target identifier. Only if portal is true |
focusOnOpen | union | Focus element on open floating | |
focusOnClose | union | Focus element on close floating | |
focusTrap | boolean | false | Trap focus inside floating content |
closeOnBackdropClick | boolean | false | Close floating on backdrop click. Only if backdrop is true |
closeOnOutsideClick | boolean | false | Close floating on outside click |
closeOnEscape | boolean | false | Close floating on escape key |
closeOnResize | boolean | false | Close floating on resize |
closeOnScroll | boolean | false | Close floating on scroll |
transitionDelay | number | 0 | Transition delay of open/close animation |
transitionDuration | number | 150 | Transition duration of open/close animation |
trigger | Snippet | Floating trigger content to render | |
content | Snippet | Floating content to render |