[Vuejs]-Vue-bootstrap how to achieve smooth working my popover

by

0👍

Remove your mouseover and mouseleave events, and instead use the hover trigger on your popover instead.
You will also need to set a container on your popover, to your card. Since by default it’s appended to body, meaning your card’s mouseover event wont work anymore, which is why it’s losing when you hover it.

<img
  src="https://i7.pngguru.com/preview/369/878/399/computer-icons-plus-sign-clip-art-plus-sign-thumbnail.jpg"
  class="m-2"
  width="24"
  height="24"
  alt
  :id="'image_id_' + card.id"
/>

<b-popover
  :target="'image_id_' + card.id"
  triggers="hover"
  :container="`#${card.id}`"
  placement="bottom"
>
  <p>Super popover data!</p>
</b-popover>

Sidenote: I don’t believe mouseover/mouseevent (along with the hover trigger on popover) are accessible events on mobile devices, along with keyboard only users. So your current design might not be useable for multiple users.

Leave a comment