[Vuejs]-How to create a Vue Tooltip component using BootstrapVue tooltip

by

4👍

✅

BootstrapVue provide <b-tooltip> component and v-b-tooltip directive (preferred method from document). You can play around in the document.

In simple words, you can use v-b-tooltip directive on any element which is very convenient. but for <b-tooltip> component you have to set target to identify the target to active the tooltip.

So in your case you can do something like:

<template>
  <div v-b-tooltip="{ title: content, placement: position }"> 
    <slot></slot>
  </div>
</template>

<script>
import { VBTooltip } from 'bootstrap-vue'

export default {
  name: 'Tooltip',
  directives: {
    'b-tooltip': VBTooltip,
  },
  props: {
    position: String,
    content: String,
  }
};
</script>
👤User 28

Leave a comment