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

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>

What is it you want to conditionally change in the tooltip? The text? — Hiws
please explain more what you want, its not understandable exactly what u need and if possible plz add a pen for it — Dcoder14

muka.gergely muka.gergely · Accepted Answer · 2020-05-01T16:28:56

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>

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

1 Answers