![\"Svelte](\"https://github.com/fedorovvvv/svelte-floating-ui/blob/main/svelte-floating-ui.png\")
\n\n \n
\n\n# 🎈Svelte Floating UI\n\n[](https://www.npmjs.com/package/svelte-floating-ui)\n[](https://www.npmjs.com/package/svelte-floating-ui)\n\n\n[Floating UI](https://github.com/floating-ui/floating-ui/) for Svelte with [actions](https://svelte.dev/docs#use_action). No wrapper components or component bindings required!\n\n```bash\nnpm install svelte-floating-ui\n```\n```bash\npnpm install svelte-floating-ui\n```\n```bash\nyarn add svelte-floating-ui\n```\n\n\n## Usage\n\n`createFloatingActions` takes an optional [options object](https://floating-ui.com/docs/computePosition#options) for configuring the content placement. The content action also takes an optional [options object](https://floating-ui.com/docs/computePosition#options) for updating the options of the content placement.\n\n`createFloatingActions` also returns an `update` method as it's third value which can be used to [manually update](https://floating-ui.com/docs/computePosition#updating) the content position.\n\n### Example\n\n```svelte\n\n\n\n Tooltip\n \n{/if}\n```\n\n## API\n\n### Setting Floating UI options\n\nFloating UI options can be set statically when creating the actions, or dynamically on the content action.\n\nIf both are set, then the dynamic options will be merged with the initial options.\n\n```svelte\n\n\n\n\n```\n\n### Updating the Floating UI position\n\nThe content element's position can be manually updated by using the third value returned by `createFloatingActions`. This method takes an optional options object which will be merged with the initial options.\n\n```svelte\n\n```\n\n### [Floating UI autoUpdate](https://floating-ui.com/docs/autoUpdate)\n\nYou can use [autoUpdate options](https://floating-ui.com/docs/autoUpdate#options) directly in initOptions for [createFloatingActions or floatingContent](https://github.com/fedorovvvv/svelte-floating-ui#example), but not in [update](https://github.com/fedorovvvv/svelte-floating-ui#updating-the-floating-ui-position)\n\n```svelte\n\n```\n\nWhat values can autoUpdate have?\n\nPartial<[Options](https://floating-ui.com/docs/autoUpdate#options)>\n\n```ts\n/**\n* false: Don't initialize autoUpdate;\n* true: Standard autoUpdate values from the documentation;\n* object: All as in the autoUpdate documentation. Your parameters are added to the default ones;\n* @default true\n*/\nautoUpdate?: boolean | PartialMagic
\n\n Tooltip this is some longer text than the button\n \n {/if}\n^\n