I am currently utilizing Vue 3 alongside Bootstrap 5.2.
In my project, I have successfully implemented a tooltip by the following method:
App.vue
<script>
import { Tooltip } from "bootstrap";
export default {
mounted() {
Array.from(document.querySelectorAll(".tooltip")).forEach(
(tooltipNode) => new Tooltip(tooltipNode)
);
}
}
</script>
Now, I am looking to dynamically update the text displayed in the tooltip upon clicking a button:
Component.vue
<template>
<div>
<button class="btn btn-success col-12" @click="changeTooltip()">Click to change Tooltip</button>
<input class="form-control tooltip col-12" data-bs-placement="bottom" :title="tooltipText" />
</div>
</template>
<script>
export default {
data() {
tooltipText: "Test Tooltip Text",
},
methods: {
changeTooltip() {
this.tooltipText = "New Tooltip Text";
}
}
}
</script>
Unfortunately, the above approach does not result in any changes to the tooltip text on click. How can I make it so that the tooltip text updates correctly when the button is clicked?
No errors are being generated - despite the value of this.tooltipText changing!
Your assistance is greatly appreciated!