Tooltip does not update on button click (Vue JS)

Question

I'm working with Vue 3 and Bootstrap 5.2.

I have implemented a tooltip (which is working fine if I define a single value to this) as following in my project:

App.vue

<script>
import { Tooltip } from "bootstrap";
export default {
  mounted() {
    Array.from(document.querySelectorAll(".tooltip")).forEach(
      (tooltipNode) => new Tooltip(tooltipNode)
    );
  }
}
</script>

Now I want to update the text which my tooltip should display when I click 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>

But nothing changes when I do it like this. How can I achieve my goal, that when I click on a button the tooltip text should be changed?

I don't get any errors - it's just not working out. this.tooltipText is changing it's value!

Thank You!

Answer 1

Bootstrap tooltip shows value from data-bs-original-title attribute. You need to change the this attribute on the element in order to update the tooltip text.

changeTooltip() {
      const updatedTooltip = 'New Tooltip Text';
      this.tooltipText = updatedTooltip;
      Array.from(document.querySelectorAll('.tooltip')).forEach(
        (tooltipNode) => {
          tooltipNode.setAttribute('data-bs-original-title', updatedTooltip);
        }
      );
    },