Question

我想创建不同版本的引导工具提示，绿色，红色等。因此，根据我在https://bootstrap-vue.js.org/docs/components/tooltip/上的阅读内容，我需要定义一个容器元素，然后相应地设置样式，

我尝试了：container =“ tooltip-container”和：container =“'tooltip-container'”，但是没有用，我正在跟踪dom，并且我的tooltip没有ID为tooltip-container的父div。

<template>
  <span>
    <span id="tooltip-container" class="tooltip-green">
    </span>
    <i v-b-tooltip
     class="btr bt-info-circle text-secondary"
     triggers="hover click"
     :title="text"
     :container="'tooltip-container'"></i>
  </span>
</template>

Answer 1

要将工具提示呈现为span，请使用：

<i v-b-tooltip="{container: '#tooltip-container'}"

据我所知，只能使用单独的属性指定title。对于其他配置选项，您要么需要使用指令修饰符（例如v-b-tooltip.hover.click），要么将值传递给指令（例如v-b-tooltip="{trigger: 'hover click'}"。

Answer 2

还要注意，对于诸如“自定义类”之类的选项道具，语法为：

<i v-b-tooltip="{customClass: 'custom-class-name'}"

Answer 3

我为此使用了弹出窗口。

<div :id="'hoverBtnId'">
    <b-button size="sm" variant="link" v-b-tooltip.hover>Something to hover</b-button>
</div>
<b-popover :target="'hoverBtnId'" triggers="hover" placement="top">
    <template v-slot:title>tooltip</template>
    <template v-slot:default>{{'some default tooltip'}}</template>
</b-popover>

v-b-tooltip的自定义类

3 个答案: