I’m trying to use the bootstrap 5 tooltips in an application with vue.js 3, but I’m not able to get them to work properly.

I’ve tried several ways, and the only one that made the tooltips appear was the first solution given to this question: Adding Bootstrap 5 tooltip to Vue 3. But it’s not just working on hover, when I click on the button where I added the tooltip, it stays “stuck” on the screen.

If anyone has had a similar problem and knows how to help, I would greatly appreciate it. I also accept suggestions for good tooltip libraries that can be used with vue.js 3, so that I can test if I can’t get the ones from bootstrap 5 to work properly.

My imports in the main.js file and the page:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import "bootstrap-icons/font/bootstrap-icons.css";

<script setup>
import { useRouter } from "vue-router";
import { Tooltip } from "bootstrap";

const showTest = () => {
  router.push("/test");
};

onMounted(() => {
  new Tooltip(document.body, {
    selector: "[data-bs-toggle='tooltip']",
  });
});
</script>

<template>
    <button
        class="btn btn-link"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Test"
        style="text-decoration: none"
        @click="showTest()"
    >
        {{ Test }}
    </button>
</template>