Question

我是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，但是我不知道我是否以应有的方式使用了它，所以我有点迷茫，不胜感激。建议，谢谢！

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

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

1 个答案: