Skip to main content
Category:

Example How to create Tooltips in Vue.js with data attributes

 

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
            });
        });
    }
});

 

Example How to use it


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

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts

Search

Page Facebook