floating-ui-svelte

Floating UI for Svelte with actions. No wrapper components or component bindings required!

Heavily based on svelte-popperjs by Bryan Lee.

npm i floating-ui-svelte

Usage

createFloatingActions takes an optional options object for configuring the content placement. The content action also takes an optional options object for updating the options of the content placement.

createFloatingActions also returns an update method as it's third value which can be used to manually update the content position.

Example

<script lang="ts">
  import { offset, flip, shift } from "@floating-ui/dom";
  import { createFloatingActions } from "floating-ui-svelte";

  const [ floatingRef, floatingContent ] = createFloatingActions({
    strategy: "absolute",
    placement: "top",
    middleware: [
      offset(6),
      flip(),
      shift(),
    ]
  });

  let showTooltip: boolean = false;
</script>

<button 
  on:mouseenter={() => showTooltip = true}
  on:mouseleave={() => showTooltip = false}
  use:floatingRef
>Hover me</button>

{#if showTooltip}
  <div style="position:absolute" use:floatingContent>
    Tooltip this is some longer text than the button
  </div>
{/if}

API

Setting Floating UI options

Floating UI options can be set statically when creating the actions, or dynamically on the content action.

If both are set, then the dynamic options will be merged with the initial options.

<script>
  // set once and no longer updated
  const [ floatingRef, floatingContent ] = createFloatingActions(initOptions);
</script>

<!-- will be merged with initOptions -->
<div use:floatingContent={ dynamicOptions }/>

Updating the Floating UI position

The 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.

<script>
  // Get update method
  const [ floatingRef, floatingContent, update] = createFloatingActions(initOptions);
</script>

<!-- Will be merged with initOptions -->
<svelte:window on:resize={() => update(updateOptions)} />

To have Floating UI handle position updates for you, pass true or AutoUpdateOptions to the autoUpdate option to have it's builtin utility handle updates for you.

Applying custom styles on compute

To apply styles manually, you can pass the onComputed option to createFloatingActions. This is a function that recieves a ComputePositionReturn. This function is called every time the tooltip's position is computed.

See Arrow Middleware for an example on it's usage.

Arrow Middleware

For convenience, a custom Arrow middleware is provided. This version of the middleware will accept either an HTMLElement or a Readable<HTMLElement>. Otherwise, this middleware works exactly as the regular Floating UI one, including needing to manually set the arrow styles.

To set the styles, you can pass the onComputed option. The below implementation is copied from the Floating UI Tutorial.

<script>
  import { writable } from "svelte/store";
  import { arrow } from "svelte-floating-ui";

  const arrowRef = writable(null);
  const [ floatingRef, floatingContent, update] = createFloatingActions({
    strategy: "absolute",
    placement: "bottom",
    middleware: [
      arrow({ element: arrowRef })
    ],
    onComputed({ placement, middlewareData }) {
      const { x, y } = middlewareData.arrow;
      const staticSide = {
        top: 'bottom',
        right: 'left',
        bottom: 'top',
        left: 'right',
      }[placement.split('-')[0]];

      Object.assign($arrowRef.style, {
        left: x != null ? `${x}px` : "",
        top: y != null ? `${y}px` : "",
        [staticSide]: "-4px"
      });
    }
  });
</script>

<button 
  on:mouseenter={() => showTooltip = true}
  on:mouseleave={() => showTooltip = false}
  use:floatingRef
>Hover me</button>

{#if showTooltip}
  <div class="tooltip" use:floatingContent>
    Tooltip this is some longer text than the button
    <div class="arrow" bind:this={$arrowRef} />
  </div>
{/if}