Popper.js如何提示插槽元素？

Question

我有疑问。如何使Poppers.js工具提示在元素(爆米花)周围显示的内容成为可能？我使用的是- Vuejs，Nuxt，我的网页的打字本

否则它“粘”在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=“爆米花”。

<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.

​

​

Answer 1

我找到了解决办法。解决方案是使用“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>

结果是

​

​