Popper.js如何给tooltip槽元素?
Popper.js how to tooltip slot element?
我有问题。如何使 Poppers.js 工具提示在元素(爆米花)周围显示的内容成为可能?
我正在为我的网页使用 Vuejs、Nuxt、typescript
否则它会“粘”在 div 元素周围并且工具提示显示是错误的。(检查下面的图片)
<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>
现在看起来如何
在检查员
第二种解决方案,我尝试将其作为参数添加到插槽元素 ref="popcorn"
<slot ref="popcorn" name="action" :toggle="toggle" :close="close" />
但它打破了 Popper.js 并且只显示垂直工具提示。
Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.
我找到了解决方案。解决方案是使用“span”而不是 'div' 标签。
<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>
结果是
我有问题。如何使 Poppers.js 工具提示在元素(爆米花)周围显示的内容成为可能? 我正在为我的网页使用 Vuejs、Nuxt、typescript
否则它会“粘”在 div 元素周围并且工具提示显示是错误的。(检查下面的图片)
<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>
现在看起来如何
第二种解决方案,我尝试将其作为参数添加到插槽元素 ref="popcorn"
<slot ref="popcorn" name="action" :toggle="toggle" :close="close" />
但它打破了 Popper.js 并且只显示垂直工具提示。
Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.
我找到了解决方案。解决方案是使用“span”而不是 'div' 标签。
<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>
结果是