Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update 
Metronic VueJS Bootstrap Tooltips/Popovers broken on demo 1
I have been unable to get Boostrap Tooltips or Popovers to work in my project. I then checked the Demo 1 application and it seems like it's broken over there as well.
For example it's working on the HTML template:
Visit https://preview.keenthemes.com/metronic8/demo1/widgets/mixed.html and scroll down, then mouseover the any of the "Team" pictures and notice the tooltip appears.
It's not working with the VueJS template:
Visit https://preview.keenthemes.com/metronic8/vue/demo1/#/crafted/widgets/mixed and mouseover the same icons and notice no tooltip appears.
Replies (1)
Hi,
Tooltips was not added on these pages in Vue.
If you want to use Bootstrap 5 tooltips you can creat a new Tooltip instance as shown in exaple below:
<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>Another alternative in Vue is to use Element UI tooltips, check their official doc for more info:
https://element-plus.org/en-US/component/tooltip.html
