Floating Vue

Appearance

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