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! 🙏️

Sponsor on GitHub

Quick start

1. Install the package:

npm

npm i floating-vue

yarn

yarn add floating-vue

pnpm

pnpm add floating-vue

2. Add the plugin into your app:

import FloatingVue from 'floating-vue'

app.use(FloatingVue)

3. Add the default style:

import 'floating-vue/dist/style.css'

Learn more about installation

4. Use the v-tooltip directive:

<button v-tooltip="'You have ' + count + ' new messages.'">

Learn more about the directive

5. Use the VDropdown or VMenu component:

<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