Popover 提示备注

使用Bootstrap v4 CSS进行样式和动画处理将BootstrapVue弹出窗口添加到站点上任何元素的文档和示例。悬停，悬停或单击某个元素可以触发弹出窗口，并且可以同时包含内容和标题。弹出窗口是类固醇的工具提示。

在您想要显示弹出框的任何元素或component上使用v-b-popover指令。

<div class="text-center my-3">
  <b-button v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-button>
</div>

总览

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

Popover依赖于第三方库Popper.js进行定位。
弹出窗口需要BootstrapVue的自定义SCSS / CSS才能正常运行以及用于变体。
如果标题和内容均未提供（或为空字符串），则不会显示弹出窗口。
S指定容器：“ body”（默认），以避免在更复杂的组件（例如输入组，按钮组等）中出现渲染问题。
在隐藏元素上触发弹出窗口将不起作用。
禁用 元素的弹出窗口必须在包装器元素上触发。
从跨越多行的超链接触发时，弹出窗口将居中。使用空格：nowrap; 在您的 s， s或 s b上，以避免此行为。

触发弹出窗口的元素应位于文档选项卡序列中。如果需要，添加 tabindex="0" 定位

定位

十二个选项可用于定位： 上, 左上, 右上, 右, 右上, 右下, 下, 左下, 右下, 左, 左上, 和 左下 . 相对于触发元素定位。

现场范例

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

扳机

可以通过，单击 悬停，焦点的任意组合来触发（打开/关闭）弹出窗口。可以指定，其中只能以 opened or closed 编程方式打开或关闭弹出窗口。

如果一个弹出窗口有多个触发器，则必须先清除所有触发器，然后才能关闭该弹出窗口。即如果弹出窗口具有触发 焦点单击, 并且已通过焦点将其打开, 然后用户单击触发元素，他们必须再次单击它并且移动焦点以关闭弹出窗口。

扳机

<div>
  <b-container fluid>
    <h5>Triggers</h5>
    <b-row class="text-center">
      <b-col md="6" class="py-3">
        <b-button v-b-popover="'Popover!'" variant="outline-success">Click (default)</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.hover="'Popover!'" variant="outline-success">Hover</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.focus="'Popover!'" variant="outline-success">Focus</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.hover.focus="'Popover!'" variant="outline-success">Hover + Focus</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

使弹出窗口对键盘和辅助技术用户有效

您只应将弹出窗口添加到传统上可键盘聚焦和交互的HTML元素（例如链接，按钮或表单控件）。尽管可以通过添加tabindex="0"列如 <span>s) 成为可聚焦的，但这将为键盘用户在非交互式元素上添加潜在的令人讨厌且令人困惑的制表位。另外，在这种情况下，目前大多数辅助技术都不会宣布弹出窗口。

此外，不要仅将鼠标 悬停作为弹出窗口的触发器，因为这将使仅键盘用户无法触发弹出窗口。

重点 `聚焦` 触发`<button>` 元素警告

仅为了触点 触发器时，为了实现正确的跨浏览器和跨平台行为，您必须使用呈现 <a>标签的元素，而不是 <a>标签

属性。

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

<b-button
  href="#"
  tabindex="0"
  v-b-popover.focus="'Popover content'"
  title="Popover title"
>
  Link button with popover directive
</b-button>

在下次点击时关闭（自行关闭）

单独使用 焦点 触发器可消除用户下次单击时的弹出窗口。 焦点 还使弹出框同时在 焦点 和 单击上激活（因为单击使元素获得焦点，前提是该元素位于页面的选项卡序列中）。

但是，你可以将触发器指定为 单击模糊这将仅使单击激活弹出窗口，而单击元素（或失去焦点到另一个元素或文档的一部分）将关闭弹出窗口。

此 模糊触发器必须与。单击 触发器结合使用

以下示例显示了 单击模糊 用例子. 弹出窗口仅在单击按钮时打开，在单击按钮或其他任何位置（或通过按 TAB 键更改焦点）时将关闭。有人称这种行为为自欺欺人。.

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

标题和内容

有几个选项可用于设置弹出窗口的标题和内容。

默认情况下，popover将使用元素的 title属性作为popover标题，并将内容作为字符串传递给v-b-popover 指令，标题和指令也可以作为对象传递给 v-b-popover 形式为：

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

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

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

标题和内容也可以是函数引用，每次打开弹出窗口时都会调用它们。要在打开时使函数返回的值具有反应性，只要内容更改，就将标题或内容设置为新的函数引用。

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover="'Content!'" title="Title from title attribute" variant="success">
          Title + Content
        </b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button
          v-b-popover.hover="{title:'Popover', content:'This is the content of popover'}"
          variant="success"
        >
          Config Object
        </b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover="popoverData" variant="success">Config from data</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.html="popoverMethod" title="Popover with HTML" variant="success">
          Method
        </b-button>
      </b-col>
    </b-row>
    <b-row class="text-center">
      <b-col cols="12" class="py-3">
        <b-button v-b-popover.hover="popoverConfig" variant="success">Config Object</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date(),
        counter: 0,
        timer: null
      }
    },
    computed: {
      popoverConfig() {
        // Both title and content specified as a function in this example
        // and will be called the each time the popover is opened
        return {
          html: true,
          title: () => {
            // Note this is called only when the popover is opened
            return 'Hello <b>Popover:</b> ' + ++this.counter
          },
          content: () => {
            // Note this is called only when the popover is opened
            return 'The date is:<br><em>' + new Date() + '</em>'
          }
        }
      },
      popoverData() {
        return {
          title: 'Popover Title',
          content: 'The date is ' + this.date
        }
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      popoverMethod() {
        // Returns the content as a string
        // Will be called each time the popover is opened
        return '<strong>' + new Date() + '</strong>'
      }
    }
  }
</script>

变体和自定义类

BootstrapVue的弹出窗口通过使用指令修饰符或配置选项，通过我们的自定义CSS支持上下文颜色变体：

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

BBootstrap默认主题变体是： 危险, 警告, 成功, 主要, 次要, 信息, 浅色, 和 深色。你可以通过 SCSS variables变量更改或添加其他变体

可以将自定义类应用于Popover外包装

通过使用customClass选项，属性：

<b-button
  v-b-popover.hover="{ customClass: 'my-popover-class', content: 'Popover content' }"
  title="Popover"
>
  Button
</b-button>

指令语法和用法

<b-button v-b-popover:[container].[mod].[mod].[...].[mod]="<value>">Button</b-button>

其中[container] 可以是（可选):

可见时用于放置弹出框标记的元素ID（减去 #)
如果未提供，则在可见时将弹出框附加到 <body> when visible

其中 [mod] 是可以 (全部选择):

定位: 上, 下, 左, 右, 自动; 或偏移对齐位置 左上, 右上, ,或 右下, 左下, 左下, 右上, 或 右下 （找到的最后一个获胜，默认为 右).
事件触发: 单击, 悬停, 聚焦, 模糊 (如果未指定默认为单击这 模糊 仅是关闭处理程序，如果由其自身指定则转化为 焦点). 如果你只想手动控制可见性，你就手动
nofade 关闭动画
html 以启用呈现原始HTML。默认情况下，HTML被转义并转换为文本。
格式为 d###的延迟值 (其中 ### 以毫秒为单位, 默认为 50), 用于隐藏 和 显示.
一个显示格式为 ds###的延迟值 (其中 ### 以毫秒为单位, 默认为 50), 仅用于 显示
一个隐藏格式为dh### 的延迟值(其中 ### 以毫秒为单位, 默认为 50), 仅用于 隐藏
以o###格式的偏移值（以像素为单位） (其中 ### 是像素数,默认为 0. 允许使用负值). 请注意，如果提供了偏移量，则对齐位置将回退到顶部，底部，左侧或右侧之一。 will fallback to one of top, bottom, left, or right.
窗口 或者 视口.的边界设置。限制弹出框的视觉位置的元素。如果未指定，则边界默认为触发器元素的滚动父级（在大多数情况下就足够了）。
v-XXX形式的上下文体（其中 XXX 是颜色变体名称).

其中<value> 可以是（可选）:

包含弹出窗内容的字串符
一个函数引用，用于生成弹出窗口的内容（接收一个参数，该参数是对触发弹出窗口的DOM元素的引用）
包含更复杂的弹出框配置的对象，有关可用选项，请参见下文。

选项配置对象属性：

Property	Type	Default	Description
`animation`	Boolean	`true`	Apply a CSS fade transition to the popover.
`container`	String ID or HTMLElement or `false`	`false`	Appends the popover to a specific element. Example: `container: '#body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. When set to `false` the popover will be appended to `body`, or if the trigger element is inside a modal it will append to the modal's container.
`delay`	Number or Object	`50`	Delay showing and hiding the popover (ms). If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`
`html`	Boolean	`false`	Allow HTML in the popover. If true, HTML tags in the popover's title and content will be rendered in the tooltip. If false, the title and content will be inserted as plain text. Use text if you're worried about XSS attacks.
`placement`	String or Function	`'top'`	How to position the popover - `auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, or `rightbottom`. When `auto` is specified, it will dynamically reorient the tooltip.
`title`	String or Function	`''`	Default title value if title attribute isn't present. If a function is given, it must return a string.
`content`	String or Function	`''`	Default content value. If a function is given, it must return a string.
`trigger`	String	`'hover focus'`	How tooltip is triggered: `click`, `hover`, `focus`. You may pass multiple triggers; separate them with a space. Specify `'manual'` if you are only going to show and hide the tooltip programmatically.
`offset`	Number or String	`0`	Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.
`fallbackPlacement`	String or Array	`'flip'`	Allow to specify which position Popper will use on fallback. Can be `flip`, `clockwise`, `counterclockwise` or an array of placements. For more information refer to Popper.js's behavior docs.
`boundary`	String ID or HTMLElement	`'scrollParent'`	The container that the popover will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll. Supported values: `'scrollParent'` (default), `'viewport'`, `'window'`, or a reference to an HTML element.
`boundaryPadding`	Number	`5`	Amount of pixel used to define a minimum distance between the boundaries and the popover. This makes sure the popover always has a little padding between the edges of its container.
`variant`	String	`null`	Contextual color variant for the popover.
`customClass`	String	`null`	A custom classname to apply to the popover outer wrapper element.
`id`	String	`null`	An ID to use on the popover root element. If none is provided, one will automatically be generated. If you do provide an ID, it must be guaranteed to be unique on the rendered page.
`disabled`	Boolean	`false`	Set to `true` to disable the popover

用法

最简单的用法：

v-b-popover="'This is a Popover!'"

或使用元素的 标题 属性作为popover标头:

v-b-popover title="This is a popover header"
v-b-popover="'This is popover content'" title="This is popover header"

或提供标题和内容的对象：

v-b-popover="{title:'Popover header', content:'Popover content'}"

启用HTML内容/标题：

v-b-popover.html="'<em>Emphasis</em> in content'" title="<strong>Bolded title</strong>"

展示位置示例：

v-b-popover.top

触发示例：

v-b-popover => Default of click
v-b-popover.hover => Hover only
v-b-popover.click => Click only
v-b-popover.hover.focus => Both hover and focus

组合：

v-b-popover.hover.bottom => Show on hover and place at bottom
v-b-popover.bottom.hover => Same as above
v-b-popover.bottom.click.html => Show on click and place at bottom with HTML content

通过$ root事件隐藏和显示弹出窗口

你可以通过在 root上发出bv::hide::popover事件来关闭（隐藏）所有打开的弹出窗口

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

要关闭 特定的弹出窗口, 请将触发器元素的id, 或弹出窗口的id(如果config对象中提供了该弹出窗口的ID）作为第一个参数传递：

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

要打开 特定的弹出窗口, 在发出 bv::show::popover事件时，将触发器元素的id, 或弹出窗口的 id （如果在config对象中提供了该弹出窗口的ID）作为第一个参数传递：

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

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

75/5000 这些事件适用于Popover的组件版本和指令版本

请注意 trigger 元素 必须存在于DOM中并且处于可见状态，以使弹出窗口实例化并显示。

通过$ root事件禁用和启用弹出窗口

你可以通过在 $root上发出bv::disable::popover事件来禁止所有弹出窗口

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

要禁用所有的弹出框，请触发器元素的id,或弹出框的 id (如果config对象中提供了该弹出框的ID）作为第一个参数传递：

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

要启用特定的弹出框, 在发出bv::enable::popover事件时，将触发元素的 id, 或弹出窗口的 id （如果在config对象中提供了弹出窗口的ID）作为第一个参数传递：:

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

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

这些事件适用于Popover的组件版本和指令版本。

请注意 trigger 元素 必须存在于DOM中才能启用或禁用弹出窗口。

也可以看看

指令参考e

导入单个指令

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

指示	命名为出口	导入路径
`v-b-popover`	`VBPopover`	`bootstrap-vue`

列如:

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

导入为Vue.js插件

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

命名为出口	导入路径
`VBPopoverPlugin`	`bootstrap-vue`

列如:

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

Popover 提示备注

总览

定位

Popover top

Popover topleft

Popover topright

Popover right

Popover righttop

Popover rightbottom

Popover bottom

Popover bottomleft

Popover bottomright

Popover left

Popover lefttop

Popover leftbottom

扳机

扳机

使弹出窗口对键盘和辅助技术用户有效

重点 `聚焦` 触发`<button>` 元素警告

在下次点击时关闭（自行关闭）

标题和内容

变体和自定义类

指令语法和用法

用法

通过$ root事件隐藏和显示弹出窗口

通过$ root事件禁用和启用弹出窗口

也可以看看

指令参考e

导入单个指令

导入为Vue.js插件

Popover 提示备注

总览

定位

Popover top

Popover topleft

Popover topright

Popover right

Popover righttop

Popover rightbottom

Popover bottom

Popover bottomleft

Popover bottomright

Popover left

Popover lefttop

Popover leftbottom

扳机

扳机

使弹出窗口对键盘和辅助技术用户有效

重点 聚焦 触发<button> 元素警告

在下次点击时关闭（自行关闭）

标题和内容

变体和自定义类

指令语法和用法

用法

通过$ root事件隐藏和显示弹出窗口

通过$ root事件禁用和启用弹出窗口

也可以看看

指令参考e

导入单个指令

导入为Vue.js插件

重点 `聚焦` 触发`<button>` 元素警告