How to add tool tip in vue js, install vue bootstrap-vue bootstrap, register BootstrapVue, import Bootstrap and BootstrapVue css files

How to add tool tip in vue js

In this tutorial you are going to learn about how to add tool tip in vue js. To get this you need to install a vue js package called bootstrap-vue. To install this package follow the below instructions:-

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

Now, register BootstrapVue in your app:


import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue

Vue.use(BootstrapVue)

// install the BootstrapVue icon components plugin

Vue.use(IconsPlugin)

Next you need to import Bootstrap and BootstrapVue css files:


 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'

Now add tool tip in your html like below:-

<router-link v-b-tooltip.hover title="Competition users" :to="'/users'">Users</router-link>

Here is the output of this tool tip

how to add tool tip in vue js
how to add tool tip in vue js

If you have any other question please comment below. Thanks for reading.

Post Created 40

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top