I have question. How to make possible what Poppers.js tooltip shows around element(popcorn) what is passed thru? I am using- Vuejs, Nuxt, typescript for my webpage
otherwise it "sticks" around div element and tooltip showing is wrong.(check images bellow)
<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>
how now it looks like in inspector
Second solution I tried to add as parameter to slot element ref="popcorn"
<slot ref="popcorn" name="action" :toggle="toggle" :close="close" />
but it breaks Popper.js and just displays vertically tooltip.
Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.
I found the solution. Solution was to use "span' instead of 'div' tags.
<template>
<div>
<span ref="popcorn">
<slot name="action" :toggle="toggle" :close="close">Default Card title</slot>
</span>
<div ref="tooltip" role="tooltip">
<div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-popover--padding-${padding}`]">
<slot name="default" />
</div>
</div>
</div>
</template>
result is
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.