CODEWITHSUNDEEP
vue.jsvuejs2
asanas
asanas

Reputation: 4280

V-tooltip: Close Popover from a method

In VueJS, I'm using v-tooltip (https://github.com/Akryum/v-tooltip) for popovers.

In order to close a popup, they provide a directive called 'v-close-popover' which I can assign to a button/link inside the popover to close the popup. This works well.

However, I have a requirement where I need to close this popup from a Vue method. But I dn't know how to trigger closing of the popover from the method.

Upvotes: 4

Views: 4472

Answers (3)

PhilVarg
PhilVarg

Reputation: 4820

The docs don't do a good job surfacing this, the #popper in the template has a slot component for hide, which you can then pass to the vue method that you want to call. for example:

<VDropdown>
  <button>Click me</button>

  <template #popper="{ hide }">
    <form @submit.prevent="handleSubmit(hide)>
      <!-- ... -->
    </form>
  </template>
</VDropdown>

now your vue method would need to get updated:

const handleSubmit(hide: () => void) => {
  // => submit logic
  hide()
}

Upvotes: 0

olvenmage
olvenmage

Reputation: 485

In case anybody else stumbles upon this issue, the v-popover component has a hide method. So if you were to place a ref on your popover component then you can access the hide method from it and call it :)

Upvotes: 2

Riddhi
Riddhi

Reputation: 2244

This is how you can achieve this.It will display tooltip on mouseOver event and remove on mouseLeave event. In template->

  <i
      id="requiredIcon"
      aria-hidden="true"
      v-tooltip="{content: 'Required option is not available for this question.', show: isOpen, trigger: 'manual'}"
      @mouseover="showTooltip"
      @mouseleave="removeTooltip"
    ></i>

In Script->

   data() {
        return {
          isOpen: false,
        };
      },
methods:{
    showTooltip() {
            this.isOpen = true;
        },
     removeTooltip() {
          this.isOpen = false;
        }
}

Upvotes: 1

Related Questions