[英]Popper.js how to tooltip slot element?
I have question.我有问题。 How to make possible what Poppers.js tooltip shows around element(popcorn) what is passed thru?
如何使 Poppers.js 工具提示围绕元素(爆米花)显示的内容成为可能? I am using- Vuejs, Nuxt, typescript for my webpage
我正在为我的网页使用 Vuejs、Nuxt、typescript
otherwise it "sticks" around div element and tooltip showing is wrong.(check images bellow)否则它会“粘”在 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>
how now it looks like现在看起来怎么样
in inspector
在检查员
Second solution I tried to add as parameter to slot element ref="popcorn"第二个解决方案我试图作为参数添加到插槽元素 ref="popcorn"
<slot ref="popcorn" name="action" :toggle="toggle" :close="close" />
but it breaks Popper.js and just displays vertically tooltip.但它破坏了 Popper.js 并且只显示垂直工具提示。
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.
解决方案是使用“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>
result is结果是
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.