Vue Tippy
VueTippy is a Vue 3 wrapper for the Tippy.js library, which allows you to use the tooltips as a Vue component and as a directive.
Getting Started
Create Plugin
Create a plugin to add Vue Tippy globally to your Nuxt application.
Here I added some configurations to the plugin, like the default animation, delay, trigger, and touch.
Feel free to change these configurations to fit your needs.
import VueTippy from "vue-tippy";
import type { TippyPluginOptions } from "vue-tippy";
import "tippy.js/animations/scale.css";
import "tippy.js/animations/shift-away.css";
import "tippy.js/animations/shift-toward.css";
import "tippy.js/animations/perspective.css";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueTippy, {
component: "Tippy",
directive: "tippy",
defaultProps: {
animation: "shift-away",
delay: [200, 100],
trigger: "mouseenter",
touch: ["hold", 500],
arrow: false,
},
} satisfies TippyPluginOptions);
});
Add CSS
Create a new CSS file and add the following code to it.
[data-tippy-root] {
.tippy-box {
@apply rounded-md bg-background px-2 py-1 text-foreground shadow ring-1 ring-border;
.tippy-content {
@apply text-[13px];
}
}
.tippy-box[data-theme~="error"] {
@apply bg-destructive text-destructive-foreground ring-destructive;
}
}
Usage
There are three(3) ways in which you can use Vue Tippy:
Directive
We can add the v-tippy directive to any element to show a tooltip.
The directive accepts a string with the content of the tooltip OR an object with the content and the options.
Check out the Directive Docs to learn more.
Component
We can use the <Tippy/> component to show a tooltip.
You can visit the Component Docs to see some more examples of how this component can be used.
Additional Props
Do note that these additional props can be added to the component
| Prop | Type | Default | Description |
|---|---|---|---|
tag | String | "span" | Trigger wrapper tag |
content-tag | String | "span" | Content wrapper tag |
content-class | String | null | Content wrapper class |
to | Element or String | null | Target selector |
Composition API
We can import nd use the useTippy composable to show a tooltip.
This is a low-level, flexible composition, ideal for building tooltips with complex interactions.
You can visit the Composition API Docs to see some more examples of how this composition can be used.
Vue Tippy Examples
Here are some examples taken from the Vue Tippy documentation.
Follow Mouse
This example shows how to create a tooltip that follows the mouse.
Context Menu
This example shows how to create a context menu using Vue Tippy.
Right Click Anywhere
Trigger Target
This example shows how to create a tooltip that is triggered by another element.
All the magic is here!
Origin UI Examples
These are some examples that I found today over here Origin Ui. I think they are cool.
To use these examples you will have to copy the code and adjust it for your own use.
