💬 Toolpop is a lightweight Vue 3 v-pop directive for reactive tooltips and simple HTML/image popovers.
<p v-pop="'Simple tooltip'">Hover me</p>
- 🎁 tiny - only 1 dependency: @floating-ui/dom (web)
- ✨ Auto-flipping + positioning with
top,right, etc. - ⚡ Supports reactive values,
ref,computed, functions - 🧩 Optional HTML/image mode via
.html
with pnpm:
pnpm add toolpopwith npm:
npm install toolpop// main.ts
import Toolpop from "toolpop";
// ...
app.use(Toolpop);
// Registers v-pop globally// main.ts
import { pop } from "toolpop";
// ...
app.directive("pop", pop); // name "pop" whatever you want
// Registers v-pop globallyYou can also rename it:
app.directive("gandalf", pop);<p v-gandalf="'A wizard is never late...'">Quote</p>top,right,bottom,left– tooltip placement (topis default, so you can omit it)html– interpret value as raw HTML (e.g. images or rich markup)click– shows the tooltip on click instead of hoverleave– hides the tooltip on mouseleave (only useful with.click)
Simple static text:
<p v-pop="'Hello world!'">Hover me</p>
<!-- You need to insert string, or function that return string -->
<!-- Or Vue reactive value as ref, computed ... -->Reactive value:
<button v-pop="`Count: ${count}`" @click="count++">Click me</button>Raw HTML image:
<!-- in JS store
const my_image = '<img src=https://bekinka.cz/images/logo_smile.webp>' -->
<p v-pop.html="my_image">Image tooltip</p>.click and .leave:
<!-- Click-activated tooltip that hides on mouseleave -->
<button v-pop.click.leave="'Click tooltip'">Click me</button>Copy src/pop.ts into your project and register locally:
import { pop } from "@/directives/pop"; // path where you put it ...
app.directive("pop", pop); // name "pop" whatever you want