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

Question

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

<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，但我不知道会如何，这是我开始的：

• I npm安装引导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指令(文档中的首选方法(。你可以在文档中玩。

简单地说，您可以在任何元素上使用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>