Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue Tooltips: Three Ways
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>
*/
<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>
*/
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>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment