Nuxtjs : How to disappear the tooltip only when form input is valid

Question

In the template below, the input disappears when fullName is true, but I wanna remove the tooltip only. Where should I fix it?

<a-tooltip placement="topRight" trigger="focus" :style="
        fullName === true
          ? { display: 'none' }
          : ''
      ">
    <template slot="title">
      <span>Please fill in your Fullname</span>
    </template>
    <a-input
      @input="checkFullname"
      :placeholder="$t('contact.placeholder.fullName')"
      v-model="dropMessage.full_name"
      :style="
        fullName === false
          ? { backgroundColor: 'rgba(211,47,47,.025)' }
          : ''
      "
    />
</a-tooltip>

Answer 1

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