Popper.js how to tooltip slot element?

Question

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.

score 0 · Accepted Answer · answered Jan 31 '22 at 09:27

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

Popper.js how to tooltip slot element?

1 Answers1