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

创建文件工具提示.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>

Answer 4

只需使用import { Tooltip } from "bootstrap";，它就可以工作了。

演示

Answer 5

如果你使用引导CDN，那么你也可以在App.vue安装的函数中这样做：

<script>
export default {
mounted() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
}
}
</script>