Visible 可见性操作

使用Bootstrap v4 默认CSS样式和动画，添加自定义BootstrapVue工具提示的文档和示例，包括鼠标悬停、聚焦或单击元素来触发工具提示等效果。

v-b-tooltip 组件能够实现tooltip的提示效果。 appear.

<div class="text-center my-3">
  <b-button v-b-tooltip.hover title="Tooltip content">Hover Me</b-button>
</div>

概览

使用tooltip指令时要了解的事项：

  • 工具提示依赖于第三方库Popper.js 进行定位。
  • 工具提示需要BootstrapVue的自定义SCSS / CSS才能正常运行，并提供变体。
  • 如果未提供标题（或为空字符串），则不会提示。
  • 指定容器：“ body”（默认），以避免在更复杂的组件（如输入组，按钮组等）中出现渲染问题。
  • 在隐藏元素上触发工具提示将无效
  • disabled 必须在包装器元素上触发禁用元素的工具提示。
  • 从跨越多行的超链接触发时，工具提示将居中。 在你使用 white-space: nowrap; <a>s、 <b-link>s、 <router-link>s, 必须避免这个操作。
  • 在从DOM中删除其相应元素之前，必须先隐藏工具提示。

定位

以下十二个选项可用于定位：top、topleft、topright、 right、righttop、rightbottom、 bottom、 bottomleft、 bottomright、 left、 lefttop、 leftbottom 默认位置是 top，相对于触发的元素进行定位。

示例如下

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.top="'Tooltip!'" variant="primary">Top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary">Right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.left="'Tooltip!'" variant="primary">Left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.bottom="'Tooltip!'" variant="primary">Bottom</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.topright="'Tooltip!'" variant="primary">Top right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.topleft="'Tooltip!'" variant="primary">Top left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.bottomright="'Tooltip!'" variant="primary">Bottom right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.bottomleft="'Tooltip!'" variant="primary">Bottom left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.lefttop="'Tooltip!'" variant="primary">Left top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.leftbottom="'Tooltip!'" variant="primary">Left bottom</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.righttop="'Tooltip!'" variant="primary">Right top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.rightbottom="'Tooltip!'" variant="primary">Right bottom</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

触发器

可以通过以下任意组合来触发（打开/关闭）工具提示： click、 hover、 focus。 默认的触发器是 hover focus。 或者可以指定一个手动触发器，其中只能以 programmatically打开或关闭弹窗。

如果工具提示中有多个触发器，则必须先清除所有触发器，然后工具提示才会 关。 即 如果工具提示具有触发器 focus click, 被打开 focus, 然后单击触发元素, 那就必须再次触发 click 和 移动焦点以关闭工具提示。

<div>
  <b-container>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip="'Tooltip!'" variant="outline-success">Hover + Focus</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover="'Tooltip!'" variant="outline-success">Hover</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.click="'Tooltip!'" variant="outline-success">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.focus="'Tooltip!'" variant="outline-success">Focus</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

键盘提示以及辅助用户使用

您只需在传统键盘上为焦点的HTML元素添加工具提示， 互动式（例如链接，按钮或表单控件）。 尽管任意HTML元素（例如 <span>s) 可以通过添加tabindex="0" 属性, 这会让使用键盘的用户在非交互式元素上增加潜在的令人讨厌和混乱的制表位。 此外，在这种情况下，目前大多数辅助技术都不会公布工具提示。

此外，不要仅仅依靠 hover 作为工具提示的触发器, 因为这将使键盘用户无法触发您的工具提示。.

禁用元素

具有 disabled 属性的元素不是交互式的, 表示用户无法专注，悬停或 单击它们以触发工具提示（或弹出窗口）。 解决方法是，您需要从wrapper上触发工具提示 <div> or <span>, 理想地使键盘聚焦使用 tabindex="0", 覆盖禁用元素上的 pointer-events。

<div>
  <span class="d-inline-block" tabindex="0" v-b-tooltip.top title="Disabled tooltip">
    <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button>
  </span>
</div>

注意事项 focus 触发 <button> 元素

仅使用以下选项时，为了实现正确的跨浏览器和跨平台行为 focus 触发器, 你必须 使用可呈现的 <a> 标签, 不能没有 <button> 标签, 并且还必须要包含tabindex="0" 属性.

下面生成一个看起来像 <a> 标签的按钮

<b-button
  href="#"
  tabindex="0"
  v-b-tooltip.focus
  title="Tooltip title"
>
  Link button with tooltip directive
</b-button>

下次点击时关闭

选择click 和 blur时， 如果您希望仅在单击元素时打开工具提示，但是 单击文档中的其他任何内容或获得焦点时，它将关闭。

请注意，您的元素 必须 在文档选项卡序列中才能起作用。 如果您的元素不可标签，则将 tabindex="0" 属性添加到该元素。

标题内容

有几个选项可提供工具提示的标题。

默认情况下，工具提示将使用 title 属性作为工具提示内容。 标题也可以以对象的形式传递给 v-b-tooltip。

const options = {
  title: 'This is the title'
}

如果标题内容具有基本的HTML标记，则还需要将 html 属性设置为true，或使用指令修饰符 html

// Object format with HTML
const options = {
  title: 'This is the <strong>title</strong>',
  html: true
}

标题也可以是一个函数引用，每次打开工具提示时都会调用它。 要使打开的函数返回的标题具有反应性，请在内容更改时将标题设置为 new 函数引用。

<template>
  <b-container>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover :title="'Tip from title attribute ' + date" variant="success">Title</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover="'String Tip'" variant="success">String</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.html="tipData" variant="success">Data</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.html="tipMethod" variant="success">Method</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        tipData: { title: 'Tooltip <em>Message</em>' },
        date: new Date(),
        timer: null
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      tipMethod() {
        // Note this is called each time the tooltip is first opened.
        return '<strong>' + new Date() + '</strong>'
      }
    }
  }
</script>

变体和自定义类

BootstrapVue的工具提示通过我们的自定义CSS支持上下文颜色变量，可以使用指令修饰符或配置选项：

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col>
        <b-button v-b-tooltip.hover.v-danger title="Danger variant">Danger Modifier</b-button>
      </b-col>
      <b-col>
        <b-button v-b-tooltip.hover="{ variant: 'info' }" title="Info variant">Info Config</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

Bootstrap默认主题变体是： danger、 warning、 success、 primary、 secondary、 info、 light、 and dark。 您可以通过Bootstrap更改或添加其他SCSS变体 。

可以将自定义类应用于工具提示wrapper <div> 通过使用 customClass 其它选项属性:

<b-button v-b-tooltip.hover="{ customClass: 'my-tooltip-class' }" title="Tooltip">Button</b-button>

指令语法和用法

<b-button v-b-tooltip:[container].[mod1].[mod2].[...].[modN]="<value>">Button</b-button>

其中 [container] 可以是 (可选的):

  • 元素ID（减去＃），用于在其中放置工具提示标记
  • 如果未提供，则工具提示将附加到 body. 如果触发元素在模式内部， 工具提示将附加到模态的容器

其中 [modX] 可以是（所有可选）：

  • 定位: top、 bottom、 left、 right、 auto、 topleft、 topright、 bottomleft、 bottomright、 lefttop、 leftbottom、 righttop、 或 rightbottom (最后一个 wins, 默认为top).
  • 触发事件: click, hover, focus, blur (如果为指定, 则默认为 focus and hover. blur 仅仅是一个关闭处理程序, 并且如果由其自身指定，将被转换为 focus)。 用 manual 如果您只想手动控制可见性。
  • nofade 关闭动画
  • html 以启用呈现原始HTML。 默认情况下，HTML被转义并转换为文本。
  • 格式为 d### (其中 ### 的延迟值, 默认值为 50), 应用于 hide and show.
  • 显示延迟值，格式为 ds### (其中 ### 以毫秒为单位, 默认值为50), 仅用于 show 触发器
  • 隐藏延迟值，格式为 dh### (where ### 以毫秒为单位, 默认值为 50), 仅用于 hide 触发器
  • 以像素为单位的偏移值，格式为o### (其中 ### 是像素数，默认为， 0。 允许负值)。
  • 边界设置 window or viewport。 限制工具提示的视觉位置的元素。 如果未指定，则边界默认为触发器元素的滚动父级（在大多数情况下就足够了）。
  • 以下形式的上下文变体 v-XXX (其中 XXX 是颜色变体的名称)。
  • noninteractive 可以使工具提示不与用户交互。

其中 <value> 是（可选的）：

  • 包含工具提示标题的字符串
  • 用于生成工具提示标题的函数引用（接收一个arg，该arg是对触发工具提示的DOM元素的引用）
  • 包含工具提示的更复杂配置的对象。 接受对象见下文 特性：

选项配置对象属性：

属性 类型 默认值 描述
animation Boolean true 将CSS淡入淡出过渡应用于工具提示
container String ID or HTMLElement or false false 将工具提示附加到特定元素。 例：container: '#body'。 此选项特别有用，因为它允许您将工具提示放置在文档流中靠近触发元素的位置-这样可以防止在调整窗口大小时工具提示从触发元素上浮走。当设置为false 时，工具提示将附加到 body,或者，如果触发器元素在模式内部，则它将附加到模式的容器中。
delay Number or Object 50 延迟显示和隐藏工具提示（毫秒）。如果提供了编号，则延迟将同时应用于隐藏/显示。 对象结构是：delay: { "show": 500, "hide": 100 }
html Boolean false 在工具提示中允许HTML。 如果为true，则将在工具提示中呈现工具提示标题中的HTML标签。 如果为false，则标题将作为纯文本插入。 如果您担心XSS攻击，请使用文字。
placement String or Function 'top' 如何放置工具提示 - auto, top、 bottom, left、 right、 topleft、 topright、 bottomleft、 bottomright、 lefttop、 leftbottom、 righttop、rightbottom。 指定 auto 时，它将动态调整工具提示的方向。
title String or Element or Function '' 如果没有标题属性，则为默认标题值。 如果给出了一个函数，它必须返回一个字符串。
trigger String 'hover focus' 工具提示的触发方式： click、 hover、 focus。 可以传递多个触发器；用空格分隔它们。
offset Number or String 0 工具提示相对于其目标的偏移量。 有关更多信息，请参阅Popper.js的offsets文档。
fallbackPlacement String or Array 'flip' 允许指定Popper在回退时将使用的位置。使用 flip, clockwise, counterclockwise 可以进行翻转，顺时针，逆时针或一系列放置。 有关更多信息，请参阅Popper.js的行为文档。
boundary String ID or HTMLElement 'scrollParent' 工具提示将在视觉上受到约束的容器。 在大多数情况下，默认值就足够了，但是如果目标元素位于带有溢出滚动的小容器中，则可能需要更改此设置。 支持的值： 'scrollParent' (默认值), 'viewport', 'window', 或引用HTML元素。
boundaryPadding Number 5 用于定义边界和工具提示之间的最小距离的像素数量。 这样可以确保工具提示在其容器的边缘之间始终有少许填充物。
interactive Boolean true 工具提示是否应与用户互动。
variant String null 工具提示的上下文颜色变体。
customClass String null 应用于工具提示外部包装器元素的自定义类名。
id String null 在工具提示根元素上使用的ID。 如果没有提供，将自动生成一个。 如果确实提供ID，则 必须 确保该ID在呈现的页面上是唯一的。
disabled Boolean false 设置 true 禁用工具提示。

用例

最简单的用法：

v-b-tooltip="'This is a Tooltip!'"

或使用元素的 title属性作为工具提示内容：

v-b-tooltip title="This is a title Tooltip"

展示位置示例：

v-b-tooltip.bottom
v-b-tooltip.right

变体示例： 

v-b-tooltip.v-primary => `primary` variant
v-b-tooltip.v-danger => `danger` variant

触发示例：

v-b-tooltip.hover => Hover only
v-b-tooltip.click => Click only
v-b-tooltip.hover.focus => Both hover and focus

组合：

v-b-tooltip.hover.bottom => Show on hover and place at bottom
v-b-tooltip.bottom.hover => Same as above
v-b-tooltip.bottom.hover.v-danger => Same as above, but with variant

对象：

v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }"

通过$ root事件隐藏和显示工具提示

您可以关闭（隐藏） 所有打开的工具提示 通过 bv::hide::tooltip 发射 $ root上的事件：

this.$root.$emit('bv::hide::tooltip')

要关闭 specific tooltip，,请将触发器元素的 id,或 id 作为工具提示的（如果config对象中提供了该工具的ID）作为第一个参数传递： 

this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id')

要打开 specific tooltip, 请将触发器元素的 id, 或 id 作为工具提示（如果有的话 是在config对象中提供的）作为发出时的第一个参数 bv::show::tooltip $root event:

this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id')

要同时打开所有弹出窗口，请省略 id 发出时的参数 bv::show::tooltip 事件

这些事件对两个组件均有效 and工具提示的指令版本。

请注意 trigger 元素 必须存在于DOM中并且处于可见状态，以便显示工具提示。

通过$ root事件禁用和启用工具提示

你可以通过所有打开的工具提示通过发射bv::disable::tooltip $ root上的事件：

this.$root.$emit('bv::disable::tooltip')

禁用 specific tooltip, 触发元素的 id, or the id 工具提示的（如果 config对象中提供了一个）作为第一个参数：

this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id')

启用 specific tooltip, 通过触发元素的 id, or the id 工具提示的（如果 发出config对象时提供的第一个参数） bv::enable::tooltip $root 事件：

this.$root.$emit('bv::enable::tooltip', 'my-trigger-button-id')

要同时启用所有弹出窗口，请省略 id 发出时的参数 bv::enable::tooltip 事件。

这些事件适用于工具提示的组件版本 和 指令版本。

注意 trigger element 必须在DOM中存在才能启用或禁用工具提示。 残障人士。

参阅

指令参考

导入单个指令

您可以通过以下命名的导出将单个指令导入到您的项目中：

指令参考 命名为 Export 导入路径
v-b-tooltip VBTooltip bootstrap-vue

例如：

import { VBTooltip } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-tooltip', VBTooltip)

作为Vue.js插件导入

该插件包括上面列出的所有单个指令。

命名为 Export 导入路径
VBTooltipPlugin bootstrap-vue

列如：

import { VBTooltipPlugin } from 'bootstrap-vue'
Vue.use(VBTooltipPlugin)