floating-vue

What is floating-vue?

floating-vue is a Vue.js library that provides a set of components and utilities for creating floating elements such as tooltips, popovers, dropdowns, and more. It is designed to be highly customizable and easy to use, making it a popular choice for adding floating UI elements to Vue applications.

What are floating-vue's main functionalities?

Tooltip

This feature allows you to add tooltips to any element. The code sample demonstrates how to use the v-tooltip directive to add a tooltip to a button.

<template>
  <div>
    <button v-tooltip="'This is a tooltip'">Hover me</button>
  </div>
</template>

<script>
import { VTooltip } from 'floating-vue';
import 'floating-vue/dist/style.css';

export default {
  directives: {
    tooltip: VTooltip
  }
};
</script>

Popover

This feature allows you to create popovers that can be attached to any element. The code sample shows how to use the v-popover directive to attach a popover to a button.

<template>
  <div>
    <button v-popover:myPopover>Click me</button>
    <popover id="myPopover">
      <p>This is a popover content</p>
    </popover>
  </div>
</template>

<script>
import { VPopover } from 'floating-vue';
import 'floating-vue/dist/style.css';

export default {
  directives: {
    popover: VPopover
  }
};
</script>

Dropdown

This feature allows you to create dropdown menus. The code sample demonstrates how to use the v-dropdown directive to create a dropdown menu attached to a button.

<template>
  <div>
    <button v-dropdown:myDropdown>Open Dropdown</button>
    <dropdown id="myDropdown">
      <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
      </ul>
    </dropdown>
  </div>
</template>

<script>
import { VDropdown } from 'floating-vue';
import 'floating-vue/dist/style.css';

export default {
  directives: {
    dropdown: VDropdown
  }
};
</script>

Other packages similar to floating-vue

v-tooltip

v-tooltip is a Vue.js directive for creating tooltips, popovers, and dropdowns. It is similar to floating-vue in terms of functionality but focuses more on simplicity and ease of use. It may not offer as many customization options as floating-vue.

vue-popperjs

vue-popperjs is a Vue wrapper for popper.js, a library used to position tooltips and popovers. It provides a more low-level API compared to floating-vue, giving developers more control over the positioning and behavior of floating elements.

vue-js-popover

vue-js-popover is a lightweight Vue.js component for creating popovers. It is simpler and more lightweight compared to floating-vue, making it a good choice for projects that require basic popover functionality without the need for extensive customization.

README

Floating Vue

Easy tooltips, dropdowns, menus... with Floating UI

Documentation

💚️ Become a Sponsor

Sponsors

---

LICENCE MIT - Created by Guillaume CHAU (@Akryum)

Changelog

v5.2.2

🩹 Fixes

• V-close-popper directive, #1022 (#1022)

❤️ Contributors

• Guillaume Chau (@Akryum)