how to initialize bootstrap tooltip everywhere in vue js

Question

I tried to initialize bootstrap tooltip in vue cli globally. so I placed this lines of code in App.vue 'mounted hook':

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

here I get bootstrap is undefined error. and

this.$jQuery('[data-bs-toggle="tooltip"]').Tooltip();

has no error but doesn't work.

I import libraries in 'main.js' like so:

// popper
import popper from "vue-popperjs/dist/vue-popper.min";
// bootstrap
import bootstrap from "bootstrap/dist/css/bootstrap.rtl.min.css";
import bootstrapJs from "bootstrap/dist/js/bootstrap.min";

Vue.use(bootstrap);
Vue.use(popper);
Vue.use(bootstrapJs);

and jQuery has been imported above of all. I'm using vuejs 2 and bootstrap 5. BS doc recommend using the first code. Maybe my approach is not the proper one to do this or my imported libraries are wrong. I can't figure out. so any answer appreciated :-)

how to initialize bootstrap tooltip everywhere in vue js

0 Answers0