CODEWITHSUNDEEP
javascriptvue.js
v01d
v01d

Reputation: 157

How to hide tooltip boxes in Vue

My goal is to get tooltip box popping up on each incorrect or empty input field when pressing 'Save' button. I managed to display tooltip boxes by pressing 'Save' button, but when I input correct text (numbers), the tooltip box doesn't hide, but shows 'false' tooltip. How to hide tooltips completely on correct input?

full code: https://jsfiddle.net/a8bnp6m4/1/

var productForm = Vue.createApp ({})

productForm.component('custom-form', {
  props: {
    modelValue: {
      type: String,
      default: ''
    },
  },   
  components: ['status-bar', 'tooltips'],
  template: `
<button v-on:click="submitProduct">Save</button>
<h1>Product Add</h1>
<div class="lines">
<label>SKU<input type="text" id="sku" v-model="this.product.sku" placeholder="ID"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.sku)" />
<label>Name<input type="text" id="name" v-model="this.product.name" placeholder="Please, provide name"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.name)" />
<label>Price<input type="text" id="price" v-model="this.product.price" placeholder="Please, provide price"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.price)" />
</div>
` ,

  data: function() {
    return {
      product: {
        sku: null,
        name: null,
        price: null,
      },
      options: ['DVD', 'Book', 'Furniture'],
      selected: 'DVD',
      tooltipText: {
        onSubmit: 'Please, submit required data',
        onType: 'Please, provide the data of indicated type',
        show: false
      }
    }
  },
  computed:{
    model:{
      get(){ return this.modelValue },
      set(v){ this.$emit('update:modelValue',v)}
    }
  },

  methods:{
    updateValue: function () {
      return this.$emit('sendData')
    },
    submitProduct: function(){
      for(var i in this.product){
        this.showTooltip(this.product[i])
        if(this.product[i]==null){
          this.tooltipText.show = true
          //this.product[i]=null
        }
      }
    },
    showData: function(){
      //console.log(this.product.sku)
      return JSON.stringify(this.product)
    },
    showTooltip: function(v){
      if(v == null){ return this.tooltipText.onSubmit }
      else if(!Number.isInteger(parseInt(v))){ return this.tooltipText.onType }    

      else { return false  }
    },
    created() {

      this.showData()
    }
  }
})

productForm.component ('tooltips', {             
  template: `
<div class="tooltip" :tooltip="tooltip" :showTooltip="showTooltip">
<span class="tooltiptext">{{tooltip}}</span>
</div>
`
})

const vm = productForm.mount('#product_form')

Upvotes: 3

Views: 1903

Answers (2)

v01d
v01d

Reputation: 157

Today in about 10 minutes with clear head I solved my problem by replacing 'v-if' content with this.tooltipText.show && showTooltip(this.product.sku)!=false in my custom tooltip tag. :) I just forgot to add an argument this.product.sku to showTooltip function.

full code: https://jsfiddle.net/amwfcv2o/

<label>SKU<input type="text" id="sku" v-model="this.product.sku" placeholder="ID"></label>
<tooltips v-if="this.tooltipText.show && showTooltip(this.product.sku)!=false" :tooltip="this.showTooltip(this.product.sku)" />

 showTooltip: function(v){
      if(v == null) { return this.tooltipText.onSubmit }
      else if(!Number.isInteger(parseInt(v))) { return this.tooltipText.onType }    
      else { return false  }
    }
  }
})

Upvotes: 1

Pavan J
Pavan J

Reputation: 353

I suspect issue is with this.tooltipText.show && showTooltip!=false". Can you try changing it to this.tooltipText.show && showTooltip"

Upvotes: 0

Related Questions