如何使用 BootstrapVue 工具提示创建 Vue Tooltip 组件

Posted 2023-02-23

【中文标题】如何使用 BootstrapVue 工具提示创建 Vue Tooltip 组件

【英文标题】：How to create a Vue Tooltip component using BootstrapVue tooltip

【发布时间】：2020-11-26 04:08:30

【问题描述】：

我是 Vue 新手，我不经常使用 Bootstrap，所以请原谅我的新手问题，我正在尝试创建一个 Vue 工具提示组件，我已经创建了一个以使用 css 来表现我想要的方式，但是，我遇到了一些可访问性问题，所以我决定改用 BootstrapVue 工具提示，但我不知道如何使用 Bootstrap 创建这个组件。 这基本上是我使用 css 的 Tooltip.vue 组件：

<template>
      <div :class="`tooltip $position`">
        <slot></slot>
        <span class="tooltip-text">content</span>
      </div>
</template>

<script>  
export default 
  name: 'Tooltip',


  props: 
    position: String,
    content: String,
  

;
</script>

<style lang="scss">
.tooltip 
.......
</style>

然后我像这样在其他地方导入和使用我的组件：

<tooltip position="right" content="Right tooltip">Hover me</tooltip>

我创建了一个 TooltipBootstrap.vue 组件，希望具有相同的结构但使用 Bootstrap，但我不知道会怎样，这是我开始的：

我 npm 安装了 bootstrap-vue

 <template>
 <div>
    <button v-b-tooltip.hover.$position="'$content'"></button>
  </div>
 </template>

<script>

  import VBTooltip from 'bootstrap-vue';

  export default 
    name: 'TooltipBootstrat',

      components: 
        VBTooltip,

    ,
    props: 
      position: String,
      content: String,
    

  ;
  </script>

我正在阅读引导文档：https://bootstrap-vue.org/docs/directives/tooltip，但我不知道我是否按照它应该使用的方式使用它，所以我有点迷茫，不胜感激任何帮助/建议，谢谢！

【参考方案1】：

BootstrapVue 提供<b-tooltip> 组件和v-b-tooltip 指令（document 中的首选方法）。您可以在文档中玩转。

简单来说，您可以在任何元素上使用v-b-tooltip 指令，非常方便。但是对于<b-tooltip> 组件，您必须设置target 来识别目标以激活工具提示。

因此，在您的情况下，您可以执行以下操作：

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