Popper.js 如何提示槽元素？

Question

我有問題。 如何使 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.

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>

結果是