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.