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?

Answer 1

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']",
    })
  }
}