将 Bootstrap 5 工具提示添加到 Vue 3

Question

main.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

组件.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>

我尝试单击该图标，但没有任何结果。我这样做错了吗？

Answer 1

我也遇到过同样的问题。这段代码对我有用。

import { Tooltip } from 'bootstrap'

export default {
  mounted() {
    new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
    })
  }
}

Answer 2

这是一个更优雅、更现代的解决方案，它使用 Typescript 和新的 Vue 3 脚本设置。

<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>

Answer 3

您可以创建指令“v-tooltip”并在任何 html 元素中使用。

创建文件tooltip.js

import { Tooltip } from 'bootstrap'

export const tooltip = {
    
  mounted(el) {
    const tooltip = new Tooltip(el)
  }

}

在main.js中添加

import { tooltip } from 'your_path/tooltip'

app.directive('tooltip', tooltip)

并使用它：

<button v-tooltip title="Hello world!">
    I am a button
</button>