I want to use Tooltips inside of my project where I'm using Vue 3 and Bootstrap 5.
I have done following in my script:
<script>
import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";
export default {
mounted() {
Array.from(document.querySelectorAll('button[data-bs-toggle="tooltip"]'))
.forEach((tooltipNode) => new Tooltip(tooltipNode));
}
}
</script>
now I want to use it inside of my template. On the following button it works out well, but I could not use it on my input.
<template>
<button type="button" class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<input
type="text"
class="form-control"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
:title="txt_input"
:value="txt_input"
readonly
/>
</template>
I could not figure out why it is not working. Thanks for your help!
Assuming you have a value for txt_input, you simply need to repeat the code for your button element:
mounted() {
Array.from(document.querySelectorAll('button[data-bs-toggle="tooltip"]'))
.forEach((tooltipNode) => new Tooltip(tooltipNode));
Array.from(document.querySelectorAll('input[data-bs-toggle="tooltip"]'))
.forEach((tooltipNode) => new Tooltip(tooltipNode));
}
However, we can write a cleaner implementation by using class name instead:
<template>
<button
class="btn btn-secondary me-2 tooltip-element"
data-bs-placement="top"
title="Tooltip on top"
type="button">
Tooltip on top
</button>
<input
:title="txt_input"
:value="txt_input"
class="form-control tooltip-element"
data-bs-placement="bottom"
readonly
type="text"
/>
</template>
<script>
import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";
export default {
mounted() {
Array.from(document.querySelectorAll('.tooltip-element'))
.forEach((tooltipNode) => new Tooltip(tooltipNode));
}
}
</script>
Edit
We can remove data-bs-toggle="tooltip" from the elements if we're using class name in the querySelectorAll.