Floating UI - Build tooltips, popovers and more

Floating UI is a Vue.js library that simplifies the process of positioning floating elements relative to a reference element. It provides a composable, useFloating(), that streamlines anchor positioning, saving you time and effort when building complex user interfaces with floating components.

Installation

To get started with Floating UI, you'll need to install it using npm or yarn:

npm install @floating-ui/dom

Usage

Floating UI's core functionality is provided through the useFloating composable. This composable accepts a reference element and returns an object containing properties for controlling the position of your floating element.

Here's a basic example demonstrating how to use useFloating to position a tooltip component relative to a button:

<script setup>
import {ref} from 'vue';
import {useFloating} from '@floating-ui/vue';

const reference = ref(null);
const floating = ref(null);
const {floatingStyles} = useFloating(reference, floating);
</script>

<template>
  <button ref="reference">Button</button>
  <div ref="floating" :style="floatingStyles">Tooltip</div>
</template>

Key Features

  • Effortless anchor positioning for floating elements
  • Flexible configuration options for customization
  • Streamlined integration with Vue.js components

Floating UI empowers you to create user interfaces with dynamic floating elements without the complexities of manual positioning. Its composable approach makes it a breeze to integrate into your existing Vue.js projects.

I hope this blog post provides a helpful introduction to Floating UI. Feel free to explore the Floating UI documentation (https://floating-ui.com/docs/vue) for more advanced usage scenarios and customization options.