时间戳

首页 > 解决方案 > 需要帮助在我的 Vue 应用程序中实现 v-tooltip npm 包

vue.js - 需要帮助在我的 Vue 应用程序中实现 v-tooltip npm 包

问题描述

我正在尝试在我的 Vue 应用程序中的自己的组件中实现 v-tooltip https://www.npmjs.com/package/v-tooltip但是当我悬停元素并且我没有得到任何东西时它目前没有做任何事情控制台错误，我不知道我是否正确实施它，并希望能得到任何帮助。在同一个应用程序中，我创建了一个名为 TooltipBoot.vue 的组件，我正在使用引导工具提示，这个组件工作得很好，所以我尝试使用 v-tooltip 进行类似的设置，但 v-tooltip 不是工作。

这是我的 TooltipBoot.vue 组件，它可以工作：

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

然后我在其他地方导入并使用我的组件：

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

所以我尝试使用 v-tooltip 做类似的事情，这是我的 VTooltip.vue 组件：

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

然后我尝试使用该组件：

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

但是当我将文本悬停时没有任何反应，我错过了什么吗？或者这不是实现这个包的方法吗？谢谢！

标签： vue.jsv-tooltip

解决方案

我得到了这个工具提示，却忘了在这里更新我的问题，解决方案比我想象的要容易得多，我只需将 Sass 样式添加到我的组件中，可以在文档底部找到https://www .npmjs.com/package/v-tooltip

推荐阅读