How to create component Tooltips in Vue.js

Example How to create component Tooltips in Vue.js

<template>
    <div v-show="false">
        <slot></slot>
    </div>
</template>

<script>
import PopperTooltip from 'tooltip.js';

export default {
    props: {
        name: {},
        placement: { default: 'top' },
        offset: { default: false }
    },

    mounted() {
        document
            .querySelectorAll(`[data-tooltip-name=${this.name}]`)
            .forEach(elem => {
                new PopperTooltip(elem, {
                    placement: this.placement,
                    title: this.$el.innerHTML,
                    offset: this.offset,
                    html: true
                });
            });
    }
};
</script>

Example How to use this component

<p>
    Yo -
    <span data-tooltip-name="our-product">
      hover over me
    </span>.
    
    <tooltip name="our-products">
      <h1 class="mb-4">Our Products</h1>
      <p>Lorem ipsum.</p>
    </tooltip>
</p>