How can a Bootstrap-vue tooltip text be changed conditionally? - vue.js

Question

How can a Bootstrap-vue tooltip text be changed conditionally by a checkbox? How can the tooltip text be accessed to change it? Any help would be greatly appreciated.
Vue component where a checkbox is attempting to change a tooltip:
<template>
<div class="text-center">
<b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary">
<div v-bind:class="{ active: checkbox1 }">
{{ username }}
</div>
</b-button>
</div>
</template>
<script>
export default {
props: ['username', 'checkbox1'],
data() {
return {
show: true,
tooltipTextContent: 'hello tooltip',
}
},
methods: {
tooltipText() {
if (!this.checkbox1) {
return this.tooltipTextContent
} else {
return `${this.tooltipTextContent} changed`
}
}
},
}
</script>
<style scoped>
.active {
color: red;
}
</style>

Answer 1

You just have to bind a value to the tooltip text that can be changed, like computed:
new Vue({
el: "#app",
data: {
username: 'Username1',
checkbox1: false,
tooltipTextContent: 'block'
},
computed: {
tooltipText() {
if (!this.checkbox1) {
return this.tooltipTextContent
} else {
return `${this.tooltipTextContent} changed`
}
}
}
})
.active {
color: red;
}
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
<div class="text-center">
<b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary">
<div v-bind:class="{ active: checkbox1 }">
{{ username }}
</div>
</b-button>
</div>
<b-form-checkbox id="checkbox-1" v-model="checkbox1" name="checkbox-1">
Change tooltip text?
</b-form-checkbox>
</div>