'Adding Bootstrap 5 tooltip to Vue 3

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?

twitter-bootstrap vue.js

Solution 1:^[1]

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

Demo

Solution 2:^[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Zim
Solution 2	jacbmelo

'Adding Bootstrap 5 tooltip to Vue 3

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]