Vue Tooltips: Three Ways

with-data-attributes.js

import PopperTooltip from 'tooltip.js';

new Vue({
    el: '#app',

    mounted() {
        document.querySelectorAll('[data-tooltip]').forEach(elem => {
            new PopperTooltip(elem, {
                placement: elem.dataset.tooltipPlacement || 'top',
                title: elem.dataset.tooltip
            });
        });
    }
});

/*

<p>
    Yo - 
  <span data-tooltip="I am a tooltip!" data-tooltip-placement="left">
    hover over me
  </span>.
</p>

*/

with-vue-component.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>

/*

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

*/

with-vue-directive.js

import PopperTooltip from 'tooltip.js';

Vue.directive('tooltip', {
    bind(elem, bindings) {
        new PopperTooltip(elem, {
            placement: bindings.arg || 'top',
            title: bindings.value
        });
    }
});

/*

<p>
    Yo -
    <span v-tooltip:top="'Here is another way to make a tooltip.'">
      hover over me
    </span>.
</p>

*/