Floating
A Floating UI wrapper component for positions elements like tooltips, popovers, or dropdowns dynamically, ensuring they stay visible and aligned relative to a reference element.
View source
<script lang="ts">
import { Floating, Button } from 'svxui';
let isOpen = $state(false)
</script>
<Floating bind:isOpen closeOnClickOutside>
{#snippet trigger()}
<Button onclick={() => (isOpen = true)}>
Open
</Button>
{/snippet}
{#snippet content()}
<div>Floating content</div>
{/snippet}
</Floating>API Reference
Floating
| Property | Type | Default | Description |
|---|---|---|---|
arrow | boolean | false | Show arrow |
autoUpdate | boolean | false | Updateposition on scroll |
backdrop | boolean | false | Show backdrop |
closeOnClickBackdrop | boolean | false | Close floating on backdrop click. Only if backdrop is true |
closeOnClickOutside | 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 |
color | string | number | symbol | "neutral" | Floating color |
content Snippet | Snippet<[void]> | Floating content to render | |
elementRef $bindable | HTMLDivElement | Rendered DOM element | |
flip | boolean | false | Use flip floating middleware |
hide | boolean | false | Use hide floating middleware |
isOpen $bindable | boolean | false | Manage/listen open state |
offset | number | 0 | Floating offset from target |
onClose | () => void | Callback when floating is closed | |
placement | union | "top" | Prefered placement |
portal | boolean | false | Enable portal rendering |
portalTarget | string | ".svxui[data-theme-root]" | Portal target identifier. Only if portal is true |
radius | union | Floating radius | |
shift | boolean | false | Use shift floating middleware |
size | union | "3" | Floating size |
transitionDelay | number | 0 | Transition delay of open/close animation |
transitionDuration | number | 150 | Transition duration of open/close animation |
trigger Snippet | Snippet<[void]> | Floating trigger content to render | |
variant | union | "solid" | Floating variant |
FloatingArrow
| Property | Type | Default | Description |
|---|---|---|---|
color | string | number | symbol | "neutral" | FloatingArrow color |
elementRef $bindable | HTMLElement | SVGElement | Rendered DOM element | |
floatingState | FloatingState | Floating positioning state | |
height | number | FloatingArrow height | |
tipRadius | number | FloatingArrow tip radius | |
variant | union | "soft" | FloatingArrow variant |
width | number | FloatingArrow width |