How to add a tooltip in Bootstrap VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To add a tooltip in Bootstrap VueJs.We are going to use two methods that is <b-tooltip> component and other one is v-b-tooltip directive.

Today I am going to show you How to add a tooltip in Bootstrap VueJS?

Table of contains

• Setup the Vue.js
• Install the Bootstrap and BootstrapVue
• Add a tooltip using Bootstrap

Let’s start today’s tutorial How do I add tooltip in Bootstrap VueJS?

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation.

How to Install the VueJS project?

Install the Bootstrap and BootstrapVue

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation. In that article, I had also show you how to install BootstrapVue in your vue.js project step by step.

How to install or configure vue-bootstrap in VueJS?

Add a tooltip using Bootstrap

To add the tooltip using bootstrap in vuejs.There are two methods to add the tooltip in bootstrap

1. Using the b-tooltip component
2. Using the v-b-tooltip directive

Let’s take an example of both methods:

1. Using the b-tooltip component

In the first method, we are going to use the <b-tooltip> component of BootstrapVue.

FirstComponent.vue

<template>
  <div>
    <h1>Welcome to sortoutcode.com</h1>
    <div>
      <b-button id="tooltip-target-1"> sortoutcode </b-button>
      <b-tooltip target="tooltip-target-1" triggers="hover">
        Tooltip using component method 
      </b-tooltip>
    </div>
  </div>
</template>
<script>
export default {
  name: "FirstComponent",
};
</script>

For now, let’s check the output.

2. Using the v-b-tooltip directive

In the second method, we are going to use the v-b-tooltip directive of BootstrapVue.

FirstComponent.vue

<template>
  <div>
    <h1>Welcome to sortoutcode.com</h1>
    <div>
      <b-button v-b-tooltip.hover title="Tooltip directive method">
        sortoutcode
      </b-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "FirstComponent",
};
</script>

For now, let’s check the output.

All the best 👍.