0

The v-popover component works great when wrapping an element inside of it, eg:

<v-popover offset="0" placement="right">
  <span>My awesome span</span>
  <template slot="popover">My awesome popover</template>
</v-popover>

However I'd like to specify the target element for the v-popover component without wrapping an element. This popover is being generated in a component that gets instantiated multiple times on the page, each with its own unique ID and popover.

After reading the popover component reference and this GitHub discussion the "container" or "target" options sound like the solution. I have tried:

<v-popover offset="0" placement="right" :container="'#' + this.id">
  <template slot="popover">My awesome popover</template>
</v-popover>

and

<v-popover offset="0" placement="right" :target="this.id">
  <template slot="popover">My awesome popover</template>
</v-popover>

but the popover does not appear. I have confirmed in the html that the component ID is being generated correctly and populated in the popover's attributes. What is missing?

Growth Mindset
  • 1,135
  • 1
  • 12
  • 28
  • The `container` property only defines where in the DOM the popup will be injected (to avoid it being clipped by `overflow:hidden`) - it certainly does not define the target. And I don't think there is a `target` prop anyway. If you do not show Vue components inside the popup - you should better use the `v-tooltip` directive, it can be easily attached to any desired element. – IVO GELOV Sep 16 '21 at 06:05
  • I do want to show Vue components inside the popup, which is why I'm using v-popover. So does have to wrap the element that it is for? There is no way to target a non-wrapped element? – Growth Mindset Sep 16 '21 at 15:31
  • Unfortunately it only triggers by the wrapped inside content. – IVO GELOV Sep 16 '21 at 17:34
  • Ok that is what I wanted to determine, thank you. If you create an answer I'll go ahead and accept it. – Growth Mindset Sep 16 '21 at 18:03

1 Answers1

0

The v-popover component does not support targeting a non-wrapped element.

Growth Mindset
  • 1,135
  • 1
  • 12
  • 28