https://github.com/tehnut/svelte-floating-ui

Floating UI for Svelte with actions
https://github.com/tehnut/svelte-floating-ui

svelte sveltekit

Last synced: about 1 month ago
JSON representation

Floating UI for Svelte with actions

• Host: GitHub
• URL: https://github.com/tehnut/svelte-floating-ui
• Owner: TehNut
• License: mit
• Created: 2021-12-11T02:12:10.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-08-21T21:09:37.000Z (over 2 years ago)
• Last Synced: 2024-04-14T11:51:37.314Z (9 months ago)
• Topics: svelte, sveltekit
• Language: TypeScript
• Homepage:
• Size: 81.1 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# floating-ui-svelte

[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!

Heavily based on [svelte-popperjs by Bryan Lee](https://github.com/bryanmylee/svelte-popperjs).

```bash

npm i floating-ui-svelte

```

## Usage

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

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

### Example

```svelte

  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;

 showTooltip = true}

  on:mouseleave={() => showTooltip = false}

  use:floatingRef

>Hover me

{#if showTooltip}

  


    Tooltip this is some longer text than the button

  

{/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.

```svelte

  // set once and no longer updated

  const [ floatingRef, floatingContent ] = createFloatingActions(initOptions);



```


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

```svelte

  // Get update method

  const [ floatingRef, floatingContent, update] = createFloatingActions(initOptions);

 update(updateOptions)} />

```

To have Floating UI handle position updates for you, pass `true` or [`AutoUpdateOptions`](https://floating-ui.com/docs/autoUpdate#options) 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`](https://floating-ui.com/docs/computeposition#return-value). This function is called every time the tooltip's position is computed.

See [Arrow Middleware](#arrow-middleware) for an example on it's usage.

## Arrow Middleware

For convenience, a custom [Arrow middleware](https://floating-ui.com/docs/arrow) is provided. This version of the middleware will accept either an `HTMLElement` or a `Readable`. 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`](#applying-custom-styles-on-compute) option. The below implementation is copied from the [Floating UI Tutorial](https://floating-ui.com/docs/tutorial#arrow-middleware).

```svelte

  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"

      });

    }

  });

 showTooltip = true}

  on:mouseleave={() => showTooltip = false}

  use:floatingRef

>Hover me

{#if showTooltip}

  


    Tooltip this is some longer text than the button

    


  

{/if}

```