|
+
+
+ {row.property}
+
+ {#if row.required}
+
+ {/if}
+ |
+
+
+ {row.description} + +
+ {#if row.type}{/if}
+ {#if row.default}{/if}
+
+ |
+
+ Renders a customizable {' pointing arrow triangle inside the floating
+ element that gets automatically positioned.
+
Provide arbitrary utility classes using the standard attribute.
++ Compare to Floating UI React. +
+Opens or closes the floating element when clicking the reference element.
++ Compare to Floating UI React. +
++ Closes the floating element when a dismissal is requested — by default, when the user presses + the escape key or outside of the floating element with their pointer. +
++ To react to the dismissal event, you can check for the reason string in + the onOpenChange callback: +
++ Compare to Floating UI React. +
++ The main Hook of the library that acts as a controller for all other Hooks and components. +
+
+ 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.
+
Destructured variables are not supported as this would break reactivity.
++ Compare to Floating UI React. +
+
+ Opens the floating element while the reference element has focus, like CSS
+ :focus.
+
+ This Hook returns event handler props. To use it, pass it the context object returned from useFloating(), and then feed its result into the useInteractions() array. The returned
+ prop getters are then spread onto the elements for rendering.
+
+ Compare to Floating UI React. +
+
+ Opens the floating element while hovering over the reference element, like CSS
+ :hover.
+
+ Compare to Floating UI React. +
+A hook to merge or compose interaction event handlers together.
+
+ The useInteractions Svelte hook allows you to consume multiple interactions.
+ It ensures that event listeners from different hooks are properly registered instead of being overruled
+ by one another.
+
+ When you want to apply an event handler to an element that uses a props getter, make sure to + pass it through the getter instead of applying it directly: +
++ This will ensure all event handlers will be registered rather being overruled by each-other. +
++ Compare to Floating UI React. +
+
+ Adds base screen reader props to the reference and floating elements for a given
+ role.
+
+ This is useful to automatically apply ARIA props to the reference and floating elements to + ensure they’re accessible to assistive technology, including item elements if narrowly + specified. +
++ Compare to Floating UI React. +
+Below you'll find a number of useful utilities.
++ Generates a unique identifier string. This function combines a random string and an + incrementing counter to ensure uniqueness. +
++ Compare to Floating UI React. +
++ Floating UI Svelte is a library that helps you create floating elements such as + tooltips, popovers, dropdowns, and more. +
++ Supports projects created using + Svelte v5 + . +
++ Install Floating UI Svelte using your package manager of choice. +
+
+ Floating UI Svelte exposes all Floating UI middleware, types, etc. You do not need to install @floating-ui/dom seperately.
+
+ At minimum, the following styles must be applied to ensure floating elements do not disrupt + the flow of the document. This can be handled using a single reusable CSS class. +
++ Please be aware that Floating UI does not take an opinionated stance on z-index stacking. +
+ + ++ When SSR is enabled and the floating element is visible upon page load it will first be + positioned in the top left of your screen. It will remain until the position is calculated. To + prevent this, you may utilize the isPositioned + prop returned from the + useFloating hook: +
+Coming Soon!
+Coming Soon!
++ This is a functional Popover that uses a combination of hooks and components, each of which is + described in the sections below. +
+An accessible popover component has the following qualities:
+
+ open determines whether or not the popover is currently open on the screen.
+ It is used for conditional rendering.
+
+ The useFloating hook provides positioning and context + for our popover. We need to pass it some information: +
+open: The open state from our useState()
+ Hook above.
+ onOpenChange: A callback function that will be called when the
+ popover is opened or closed. We’ll use this to update our open state.
+ middleware: Import and pass middleware to the array that ensure
+ the popover remains on the screen, no matter where it ends up being positioned.
+ whileElementsMounted: Ensure the popover remains anchored to the
+ reference element by updating the position when necessary, only while both the reference and
+ floating elements are mounted for performance.
+
+ The useInteractions hooks returns an object
+ containing keys of props that enable the popover to be opened, closed, or accessible to screen
+ readers. Using the
+ context that was returned from the Hook, call the interaction Hooks.
+
useClick(): adds the ability to toggle the popover open or closed
+ when the reference element is clicked.
+ useDismiss(): adds the ability to dismiss the popover when the
+ user presses the esc key or presses outside of the popover.
+ useRole(): adds the correct ARIA attributes for a
+ dialog to the popover and reference elements.
+
+ Finally, useInteractions() merges all of their props into prop getters
+ which can be used for rendering.
+
Now we have all the variables and Hooks set up, we can render out our elements.
++ You can press the esc key or click outside to + *dismiss* this floating element. +
+{`{...getReferenceProps()}`} /
+ {`{...getFloatingProps()}`}
+ spreads the props from the interaction Hooks onto the relevant elements. They contain props like
+ onClick, aria-expanded, etc.
+ {` is a component that manages
+ focus of the popover for non-modal or modal behavior. It should directly wrap the floating element
+ and only be rendered when the popover is also rendered.
+ + You can press the esc key or click outside to + *dismiss* this floating element. +
++ A tooltip is a floating element that displays information related to a button or anchor + element when it receives keyboard focus or the mouse hovers over it. +
+An accessible tooltip component has the following qualities:
+
+ open determines whether or not the tooltip is currently open on the screen.
+ It is used for conditional rendering.
+
+ The useFloating hook provides positioning and context + for our tooltip. We need to pass it some information: +
+open: The open state from our useState()
+ Hook above.
+ onOpenChange: A callback function that will be called when the
+ tooltip is opened or closed. We’ll use this to update our open state.
+ middleware: Import and pass middleware to the array that ensure
+ the tooltip remains on the screen, no matter where it ends up being positioned.
+ whileElementsMounted: Ensure the tooltip remains anchored to the
+ reference element by updating the position when necessary, only while both the reference and
+ floating elements are mounted for performance.
+
+ The useInteractions hooks returns an object
+ containing keys of props that enable the tooltip to be opened, closed, or accessible to screen
+ readers. Using the
+ context that was returned from the Hook, call the interaction Hooks.
+
useRole(): adds the correct ARIA attributes for a
+ tooltip to the tooltip and reference elements.
+ useHover(): adds the ability to toggle the tooltip open or closed
+ when the reference element is hovered over. The move option is set
+ to false so that
+ mousemove events are ignored.
+ useDismiss(): adds the ability to dismiss the tooltip when the
+ user presses the esc key.
+ useFocus(): adds the ability to toggle the tooltip
+ open or closed when the reference element is focused.
+ Now we have all the variables and Hooks set up, we can render out our elements.
++ A floating element is one that floats on top of the UI without disrupting the + flow, like this one! +
+
+ {`{...getReferenceProps()}`} and
+ {`{...getFloatingProps()}`} spreads the props from the interaction
+ Hooks onto the relevant elements. They contain props like
+ onMouseEnter, aria-describedby, etc.
+
+ A floating element is one that floats on top of the UI without disrupting the + flow, like this one! +
+We're sorry, something went wrong.
+Visit svelte.dev/docs/kit to read the documentation
+ + ++ Floating UI Svelte is available in early access. Expect bugs, missing features, and + incomplete documentation. +
++ A Svelte library for position floating elements and handling interaction. Inspired by Floating UI. +
+