Adding Bootstrap 5 tooltip to Vue 3

Question

main.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

Component.vue

<template> 
                  <i
                class="fas fa-info-circle"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Tooltip on top"
                ref="info"
              ></i>


</template>
<script>
import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";

export default {
  mounted() {
    console.log(this.$refs.info);
    new Tooltip(this.$refs.info)
  },
}
</script>

I tried clicking on the icon but nothing is coming out. Am I doing this wrongly?

Kyanoush · Accepted Answer · 2022-08-04 07:45:22Z

21

I've had the same problem. This code works for me.

import { Tooltip } from 'bootstrap'

export default {
  mounted() {
    new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
    })
  }
}

answered Aug 4, 2022 at 7:45

Kyanoush

2512 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

peterlawn Over a year ago

this thread works for me, thx a lot :)

Sergio Azócar · Accepted Answer · 2022-06-10 19:51:54Z

14

You can create a directive "v-tooltip" and used in any element html.

create file tooltip.js

import { Tooltip } from 'bootstrap'

export const tooltip = {
    
  mounted(el) {
    const tooltip = new Tooltip(el)
  }

}

In main.js add

import { tooltip } from 'your_path/tooltip'

app.directive('tooltip', tooltip)

and use it:

<button v-tooltip title="Hello world!">
    I am a button
</button>

answered Jun 10, 2022 at 19:51

Sergio Azócar

1411 silver badge2 bronze badges

5 Comments

rhemmuuu Over a year ago

I'm not an expert in frontend, been struggling for hours now. This solution is so simple even I can follow. Thank you, it works.

Joulss Over a year ago

Simple and efficient, thanks a lot.

John Go-Soco Jan 15 at 16:15

This is great. The only issue I have with this is that the Tooltip doesn't go away when the element does.

WoodrowShigeru Jul 10 at 13:41

You can add this (simplified to shortcode): unmounted: ( element ) => try { element.tooltip?.bsInstance?.dispose?.(); } catch { /* noop */ }

WoodrowShigeru Jul 10 at 13:57

I must add, I am having a more reactive, less buggy experience if I set the data-bs-original-title attribute directly and the title not at all: <button v-tooltip :data-bs-original-title=".tooltip">etc. For example, you can see the improvement better if you have a language switcher.

jacbmelo · Accepted Answer · 2022-03-29 07:42:46Z

9

Here is a more elegant and modern solution that uses Typescript with the new Vue 3 script setup.

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Tooltip } from "bootstrap";

const info = ref(null);
let infoTooltip: Tooltip | undefined;

onMounted(() => {
  infoTooltip = new Tooltip(info.value!);
});
</script>

<template> 
  <i
    class="fas fa-info-circle"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    title="Tooltip on top"
    ref="info"
  ></i>
</template>

answered Mar 29, 2022 at 7:42

jacbmelo

3714 silver badges8 bronze badges

1 Comment

ucipass Over a year ago

This should be the accepted answer as the Tooltip is tied to the element.

Carol Skelly · Accepted Answer · 2021-09-04 12:32:56Z

3

Simply use import { Tooltip } from "bootstrap";, and it should work.

Demo

answered Sep 4, 2021 at 12:32

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

1 Comment

DaveL17 Over a year ago

For me, this worked. Adding data-bs-toggle="tooltip" data-bs-placement="top" title="My tooltip." to the container was all that was needed (no js). One interesting thing on Mac is that data-bs-placement="top" doesn't place the tooltip on top. Need to figure that out.

Nuno Fonseca · Accepted Answer · 2023-10-04 10:59:48Z

3

I just added this code from Kyanoush at the App.Vue and it works great:

import { Tooltip } from 'bootstrap'

export default {
  mounted() {
    new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
    })
  }
}

answered Oct 4, 2023 at 10:59

Nuno Fonseca

313 bronze badges

Comments

Taha Mir · Accepted Answer · 2022-12-15 13:41:43Z

0

If you are using bootstrap CDN then you can also do it in App.vue mounted function like this :

<script>

export default {
  mounted() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    });
  }
}

</script>

answered Dec 15, 2022 at 13:41

Taha Mir

11 bronze badge

Comments

Tomas Zubrik · Accepted Answer · 2023-11-16 13:26:27Z

0

For usage in one component context only

<script setup>
  import {Tooltip} from "bootstrap"

  const vCustomTooltip = {
    mounted: (el) => new Tooltip(el)
  }
</script>
<template>
   <div class="wrapper">
     <div v-custom-tooltip title="Email verification"></div>
     <div v-custom-tooltip title="Phone verification"></div>
   </div>
</template>

Tooltip directive (vCustomTooltip) can be named whatever
Default settings for bootstrap tooltip is used (placement top, title as tooltip value)

answered Nov 16, 2023 at 13:26

Tomas Zubrik

5176 silver badges14 bronze badges

Comments

Ikram Syakir · Accepted Answer · 2023-12-17 08:22:15Z

0

for those who use cdn or direct link to bootstrap file use this code

export const tooltip = {

    mounted(el) {
        const tooltip = new bootstrap.Tooltip(el)
    }

}

answered Dec 17, 2023 at 8:22

Ikram Syakir

371 silver badge7 bronze badges

Collectives™ on Stack Overflow

Adding Bootstrap 5 tooltip to Vue 3

8 Answers 8

1 Comment

5 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

5 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related