Make v-popover follow the element when it is dragged

[panayotisk]

I would like to know the recommended approach for having the popover automatically update its position when the target element position is changed. I saw that popper.js has a method to manually update via instance.update() but how do I get the popper instance from v-popover?

[panayotisk]

I finally did it (in a bit hacky way) as follows:

• Gave the v-popover a vue ref:

<v-popover
      ref="pop"
     ... 
>

• In my drag handler called the component's popperInstance's update: this.$refs.pop.popperInstance.update(); However, this depends on the internal implementation of v-popover and cannot be considered a final solution. I will be leaving this issue open.

[Fanna1119]

was also looking for this. since i am working with range bars the tooltip does not stick. Will see if i can manage this workaround :D

[naaadz]

Looking for this too.. any luck? I'm using vue3 so i couldn't get popperInstance to work

[radusuciu]

Looking for this too.. any luck? I'm using vue3 so i couldn't get popperInstance to work

This is also a hack, but you can call onResize on a Dropdown instance like this:

<script lang="ts" setup>
import { ref } from 'vue'

const dropdown = ref(null)

// ...

function doSomething() {
  dropdown.value.onResize()
}
</script>

<template>
<VDropdown ref="dropdown" />
</template>