[Vuejs]-Nuxtjs : How to disappear the tooltip only when form input is valid

by

0👍

Using display: none to style your tooltip would cause the tooltip’s default slot (the input) to also be hidden, but you don’t have to resort to style bindings here.

<a-tooltip> has a v-model that can be set to false to hide the tooltip. For example, you could use a data prop (e.g., named tooltipVisible) as the v-model binding, and set it based on the user input in checkFullname():

<template>
  <a-tooltip title="Enter John Doe" v-model="tooltipVisible">
    <a-input @input="checkFullname" v-model="dropMessage.full_name" />
  </a-tooltip>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false,
    }
  },
  methods: {
    checkFullname() {
      this.tooltipVisible = this.dropMessage.full_name !== 'John Doe'
    },
  },
}
</script>

demo

Leave a comment