Paste tooltip.js in your src folder, I personally create folder directives inside for the sake of clarity. Next step is to paste tooltip.css inside your assets folder.
Paste tooltip.js
in your src
folder, I personally create folder directives
inside for the sake of clarity. Next step is to paste tooltip.css
inside your assets
folder.
When you have all the files, open your main.js
file (or whatever it is called, the one where you mount your app) and import those files. Then use app.directive
to globally add v-tooltip
custom directive. It should look similar to that:
import { createApp } from "vue";
import App from "./App.vue";
import tooltip from "./directives/tooltip.js";
import "@/assets/tooltip.css";
const app = createApp(App);
// app.directive's first argument is the directive's name you will use
// it can be whatever you wish
app.directive("tooltip", tooltip);
app.mount("#app");
And that's it! Now you can use it everywhere (there are some limitations though, f.e. it doesn't work for <select>
element, you have add v-tooltip
to its wrapper).
Using v-tooltip
is really simple. Just like any other directive you add it to the element and provide some data. The easiest example look like this:
<template>
<button v-tooltip="'This button deletes our universe'">
Delete universe
</button>
</template>
You just provide a string to the v-tooltip
and it does its magic to create your own reactive tooltip. On hover it will look like that:
V-tooltip accepts both strings as well as objects. If you don't need any local customization, strings are the way to go. V-tooltip updates automatically, so you can have live changing tooltip.
<template>
<button
v-tooltip="`You did nothing ${count} times`"
@click="increaseCount"
>
Do nothing
</button>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increaseCount() {
this.count++;
}
}
}
</script>
Result after clicking 4 times:
Object notation gives many more possibilities. If you want to have tooltips which differ from each other, this can be easily done (you would probably use computed
property to declutter template):
<template>
<button
v-tooltip="{
text: 'Lorem ipsum dolor',
theme: {
color: '#000000',
border: '1px solid red',
'background-color': 'pink',
'font-size': '2rem',
},
}"
>
Button with fancy/ugly tooltip
</button>
</template>
Worth noting: text
property is optional, so you can do some tricky stuff, like adding only v-tooltip theme
to some <div>
and every tooltip inside that <div>
will inherit that theme instead of the default one.
It's more likely that you want to have all tooltips look the same, but different than the default. You have two options:
tooltip.css
fileglobal
propertyAt the top of tooltip.css
there are a bunch of CSS variables which define all of the customizable properties of v-tooltip
. Just change them and that will work globally as a default.
You can also don't touch the tooltip.css
and do the same thing using v-tooltip
with property global: true
:
<template>
<div
v-tooltip="{
global: true,
theme: {
position: 'bottom',
width: 'fit-content',
padding: '2rem',
},
}"
>
<button v-tooltip="'tooltip with changed default style'">
I run out of ideas
</button>
</div>
</template>
This will affect every tooltip in the app, because it changes the CSS variables in the :root
. You can place it wherever you want, I suggest adding it to the top element in the app, using it as semi-"layout" component.
string | Object
top (default), bottom, left, right
: placement of the tooltip relative to the element its called onmax-content
#000000
#ffffff
0.4rem
0.6em
0.8rem
none
0.25s
0.3s
ease
:root
, therefore changing theme for all of the tooltips on the pageAuthor: maciejziemichod
Source Code: https://github.com/maciejziemichod/v-tooltip
In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.
Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get
In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.
Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.