Floating Vue: Tooltips, Dropdowns, and Menus That Actually Float

If you've ever tried to build a clean tooltip or dropdown in Vue, you know the pain. Positioning them is fiddly, they break on scroll, they clip on overflow hidden, and they never look right on mobile. Most solutions either work okay for simple cases or rely on hacky CSS that falls apart the second the viewport changes.

Enter Floating Vue. It wraps the excellent Floating UI library (the spiritual successor to Popper.js) into a set of Vue 3 and Vue 2 components that handle all the heavy lifting. Tooltips, dropdowns, menus, popovers — they just work, and they stay where they're supposed to.

What It Does

Floating Vue is a lightweight component library that gives you smart, auto-positioned floating elements. Under the hood, it uses Floating UI to dynamically calculate position relative to a reference element, then automatically flips, shifts, or resizes when space runs out.

The library includes:

• VTooltip — classic hover/focus tooltips
• VDropdown — clickable dropdown menus
• VMenu — nested menu structures
• VPopover — richer popover overlays

Each component handles positioning, collision avoidance, and arrow placement automatically. It also respects the user's reduced motion preferences and works with both Vue 2 and Vue 3 (so you can use it in legacy projects too).

Why It's Cool

No more position: absolute nightmares. Floating Vue computes the best position based on available viewport space. If the tooltip would overflow right, it shifts left. If it runs off the top, it flips below. You don't write a single pixel of positioning logic.

Smooth transitions built in. The components ship with CSS transitions for open and close states. The arrows auto-align to the center of the reference element, and they scale/rotate with the transition — no extra animation work needed.

Event handling that doesn't fight you. Tooltips respond to hover, focus, and click. Dropdowns close on click outside or Escape. You can customize the trigger and the delay. It feels natural, not like a janky jQuery plugin from 2014.

Tree-shakeable. Only import what you need. If you just want tooltips, you don't pull in the dropdown or menu code. Bundle size stays tight.

Accessibility aware. The components set role attributes, aria-describedby, and other ARIA properties where appropriate. Not perfect in every edge case, but better than most.

How to Try It

Install via npm:

npm install floating-vue

Or yarn:

yarn add floating-vue

For Vue 3, import and use the plugin:

import { createApp } from 'vue'
import FloatingVue from 'floating-vue'
import App from './App.vue'

createApp(App).use(FloatingVue).mount('#app')

Then use a component in your template:

<VTooltip placement="top" content="Hello from the floating world!">
  <button>Hover me</button>
</VTooltip>

That's it. The tooltip positions itself. For Vue 2, the API is identical — just register the plugin with Vue.use(FloatingVue).

Check out the live demo on the repo for more examples, including menus with sub-menus and popovers with custom content.

Final Thoughts

This isn't flashy or hyped. It's a solid, well-maintained utility that solves a genuinely annoying problem. If you're building any kind of UI that needs tooltips or dropdowns (and let's be honest, most apps do), Floating Vue will save you hours of positioning head-scratches. It's production ready, works with both Vue versions, and the API is simple enough that you'll remember it without checking docs every time.

I'd use this over building a custom solution from scratch any day. It's one of those libraries that just quietly does its job so you can focus on the actual features.

Follow @githubprojects for more developer tools and libraries.