floating-vue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

floating-vue

Vue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

npm GitHub Docs

Fit

Bundle (gzip)

12.0 kB

39.7 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Positioning tooltips and dropdowns correctly — especially near viewport edges — requires complex Popper/Floating UI integration. Building accessible, keyboard-navigable dropdowns from scratch in Vue is tedious.

What It Does

Floating Vue provides a v-tooltip directive for simple tooltips and <VDropdown> / <VMenu> components for popovers and menus. It uses Floating UI under the hood to automatically flip and shift floating elements to stay within the viewport. All triggers are accessible by keyboard.

Installation

bash

npm install floating-vue

Usage Example

vue

<script setup>
import { vTooltip, VDropdown } from 'floating-vue';
import 'floating-vue/dist/style.css';
</script>

<template>
  <!-- Simple tooltip -->
  <button v-tooltip="'Click to save'">Save</button>

  <!-- Popover with custom content -->
  <VDropdown>
    <button>Options</button>
    <template #popper>
      <ul>
        <li>Edit</li>
        <li>Delete</li>
      </ul>
    </template>
  </VDropdown>
</template>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.

unplugin-vue-componentsVue

On-demand auto-import for Vue components — eliminate all manual component imports and registrations in your Vue 3 project.