Skip to content

Getting started

floating-vue is a library helping you add tooltips, dropdowns and other poppers into your Vue application.

Looking for the old docs?

Sponsors

Thank you to my sponsors allowing me to spend more time on Open Source projects! 🙏️

Quick start

  1. Install the package:
bash
npm i floating-vue
bash
yarn add floating-vue
bash
pnpm add floating-vue
  1. Add the plugin into your app:
js
import FloatingVue from 'floating-vue'

app.use(FloatingVue)
  1. Add the default style:
js
import 'floating-vue/dist/style.css'

Learn more about installation

  1. Use the v-tooltip directive:
html
<button v-tooltip="'You have ' + count + ' new messages.'">

Learn more about the directive

  1. Use the VDropdown or VMenu component:
html
<VDropdown>
  <!-- This will be the popover target (for the events and position) -->
  <button>Click me</button>
  <!-- This will be the content of the popover -->
  <template #popper>
    <MyAwesomeComponent/>
  </template>
</VDropdown>

Learn more about the component

Made by Guillaume Chau with ❤️