Getting Started
Option1: CDN
<script src="https://unpkg.com/vue-tippy@4/dist/vue-tippy.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tippy@4/dist/vue-tippy.min.js"></script>
1
2
2
Option 2: Package Manager
npm install --save vue-tippy@v4
yarn add vue-tippy@v4
1
2
2
Then, import the vue-tippy:
import Vue from "vue";
import VueTippy, { TippyComponent } from "vue-tippy";
Vue.use(VueTippy);
// or
Vue.use(VueTippy, {
directive: "tippy", // => v-tippy
flipDuration: 0,
popperOptions: {
modifiers: {
preventOverflow: {
enabled: false
}
}
}
});
Vue.component("tippy", TippyComponent);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Add additional themes.
import "tippy.js/themes/light.css";
import "tippy.js/themes/light-border.css";
import "tippy.js/themes/google.css";
import "tippy.js/themes/translucent.css";
1
2
3
4
2
3
4
You can access to tippy library like this:
import { tippy } from "vue-tippy";
1
TypeScript
You will need to import the ESM directly.
import VueTippy from 'vue-tippy/dist/vue-tippy.esm';
1