v-tooltip
A Vue.js library for creating tooltips, popovers, dropdowns, and menus using Floating UI.
What is v-tooltip?
Floating Vue is a Vue.js library for creating floating UI elements like tooltips, popovers, dropdowns, and menus. It solves the problem of building accessible, well-positioned interactive components in Vue applications by leveraging the Floating UI library for robust positioning logic.
Vue.js developers who need to add tooltips, popovers, or dropdown menus to their applications with minimal setup and reliable positioning.
Developers choose Floating Vue for its simplicity, Vue-native component API, and seamless integration with Floating UI, which ensures accurate positioning across different browsers and viewports without manual calculations.
Overview
💬 Easy tooltips, popovers, dropdown, menus... for Vue
Use Cases
Best For
- Adding tooltips to buttons or icons in Vue applications
- Building custom dropdown menus with Vue components
- Creating interactive popovers for forms or data displays
- Implementing accessible floating UI elements in Vue 2 or Vue 3 projects
- Replacing older v-tooltip implementations with modern Floating UI
- Quickly prototyping floating UI components without writing positioning logic
Not Ideal For
- Applications not built with Vue.js, such as React or Angular projects
- Projects where minimizing bundle size is critical, as Floating Vue adds dependencies like Floating UI
- Teams seeking fully styled, theme-ready components without custom CSS work
- Use cases requiring server-side rendering with zero client-side JavaScript, as it relies on browser interactivity
Pros & Cons
Pros
Offers a declarative Vue component API that integrates seamlessly with Vue's reactivity system, making it intuitive for Vue developers to use without learning a new framework.
Works with both Vue 2 and Vue 3, as highlighted in the README, allowing teams to use it across different Vue versions without major rewrites or compatibility issues.
Leverages Floating UI (formerly Popper.js) for precise and reliable positioning of floating elements, handling complex logic like viewport adjustments and collision detection automatically.
Focuses on simplicity by abstracting complex positioning logic, enabling quick prototyping and implementation of tooltips, popovers, and dropdowns with minimal setup.
Cons
The rename from v-tooltip to floating-vue, as noted in the README, can create challenges for existing users, requiring updates to imports and configurations that may break workflows.
The changelog is not pushed to GitHub Releases, making it harder to track updates and breaking changes, which can lead to unexpected issues during upgrades or debugging.
Provides minimal built-in styles, so developers must invest time in custom CSS to match design systems, adding to development effort compared to pre-styled alternatives.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.