CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Florent Bouisset
Florent Bouisset

Reputation: 1075

Vuetify trigger a tooltip

I'm using vuetify, and I have a tooltip over a button. I doesn't want to show the tooltip on hover nor on click, I want to show the tooltip if some event is triggered.

translate.vue

<v-tooltip v-model="item.showTooltip" top>
  <template v-slot:activator="{}">
    <v-btn @click="translateItem(item)"> Call API to translate</v-btn>
  </template>
  <span>API quota limit has been reached</span>
</v-tooltip>


<script>
export default(){
  props: {
    item: { default: Objet}
  }
 methods: {
   translateItem: function (item) {
     axios
       .post(baseURL + "/translateAPI", {
         text: item.originTrad;
       })
       .then((res) => {
          if (apiQuotaLimitReached(res) { 
            // If limit is reached I want to show the tooltip for some time
            item.showTooltip = true;
            setTimeout(() => {item.showTooltip = false;}, 3000);
            } else  { ..... }}}
</script>

itemSelect.vue (where I create object item and then use router push to transmit it to the translation page)

<script>
export default(){
 methods: {
   createItem: function () {
     item.originTrad = "the text to translate"
     ....
     item.showTooltip = false;
     this.$router.push({
       name: "translate",
       params: {
            "item": item,
       },
     });  }}
</script>

As you can see I removed the v-slot:activator="{ on }" and v-on="on" that I found on the exemple:https://vuetifyjs.com/fr-FR/components/tooltips/ , because I don't want to show the tooltip on hover. But It doesn't work as expected, the tooltip is not showing properly. Some help would be great :)

Upvotes: 1

Views: 1778

Answers (1)

Laurens
Laurens

Reputation: 2607

For starters, you are trying to change a prop in the child component, something that you should not do:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "item.showTooltip"

So start by making a separate data variable for showTooltip (doesn't need to be a property of item perse) and try setting it to true to see what happens (and of course change v-model="item.showTooltip" to v-model="showTooltip" on v-tooltip)

Upvotes: 1

Related Questions