Need help implementing v-tooltip npm package in my Vue application

Question

I'm trying to implement v-tooltip https://www.npmjs.com/package/v-tooltip in my Vue app in its own component but it's currently not doing anything when I hover the element and I don't get any console errors, I don't know if I'm implementing it correctly and would appreciate any help I can get. In the same application, I have created a component called TooltipBoot.vue where I'm using the bootstrap tooltip, and this one is working just fine, so I tried to do a similar setup with v-tooltip, but v-tooltip is not working at all.

Here is my TooltipBoot.vue component that works:

 <template>
  <span v-b-tooltip ="{ title: content, placement: position, trigger: action, variant: theme}"> 
    <slot></slot>
  </span>
 </template>

<script>

import { VBTooltip } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


export default {
  name: 'TooltipBoot',

  directives: {
    'b-tooltip': VBTooltip,
  },
  props: {
    position: String,
    content: String,
    action: String,
    theme: String
  },
};
</script>

Then I import and use my component in other places:

<tooltip-boot content="Hello" position="top" theme="danger">Hover me</tooltip-boot>

So I tried to do something similar using v-tooltip, this is my VTooltip.vue component:

<template>
      <span v-tooltip ="{ content: content}"> 
        <slot></slot>
      </span>
</template>

<script>

import { VTooltip } from 'v-tooltip'

export default {
    name: 'VTooltip',

    directives: {
        'tooltip': VTooltip,
        },


    props: {
    content: String,
        },
};

</script>

And then I try to use the component:

<v-tooltip content="Hello Tooltip">Hover me </v-tooltip>

but nothing happens when I hover the text, am I missing anything? Or is this not the way to implement this package? Thank you!

score 0 · Answer 1 · answered Dec 10 '20 at 23:12

I got this tooltip working and forgot to update my question here, the solution was a lot easier than I thought, I just had to add the Sass styles to my component, which can be found at the bottom in the documentation https://www.npmjs.com/package/v-tooltip

Need help implementing v-tooltip npm package in my Vue application

1 Answers1