I have a question. How can I make the Poppers.js tooltip appear around an element (popcorn) that is passed through? I am using Vuejs, Nuxt, and typescript for my webpage.
Otherwise, it "sticks" around the div element and the tooltip displays incorrectly (check images below).
<template>
<div>
<div ref="popcorn" aria-describedby="tooltip">
<slot name="action" :toggle="toggle" :close="close" />
</div>
<div ref="tooltip" role="tooltip">
<div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-popover--padding-${padding}`]">
<slot name="default" />
</div>
</div>
</div>
This is how it currently looks like: https://i.sstatic.net/7G1cK.png in the inspector: https://i.sstatic.net/U61XC.png
The second solution I tried was to add a parameter to the slot element with ref="popcorn"
<slot ref="popcorn" name="action" :toggle="toggle" :close="close" />
but this breaks Popper.js and only shows the tooltip vertically.
Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.