约夏克布丁

Popovers-Bootstrap 5和Material Design 2.0组件

将弹出式窗口（如iOS中的弹出窗口）添加到上任何元素的文档和示例 您的网站。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子


          <button
            type="button"
            class="btn btn-lg btn-danger"
            data-mdb-toggle="popover"
            title="Popover title"
            data-mdb-content="And here's some amazing content. It's very engaging. Right?"
          >
            Click to toggle popover
          </button>

总览

使用弹出框时要了解的事项：

  • 出于性能原因选择启用弹出式窗口，因此 您必须自己对其进行初始化。
  • 长度为零的 title 和 content 值将永远不会显示弹出窗口。
  • 指定 container: 'body' 避免更复杂的渲染问题 组件（例如我们的输入组，按钮组等）。
  • 在隐藏元素上触发弹出窗口将不起作用。
  • .disabled 或 disabled 元素的弹出窗口必须在 包装器元素。
  • 从跨越多行的锚点触发时，弹出窗口将居中 在锚的总宽度之间在您的计算机上使用 .text-nowrap <a>s 避免这种行为。
  • 弹出窗口必须先隐藏，然后才能从DOM中删除其相应元素。
  • 影子DOM中的一个元素可以触发弹出窗口。

四个方向

共有四个选项：顶部，右侧，底部和左侧对齐。


          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="top"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
          >
            Popover on top
          </button>

          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="right"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
          >
            Popover on right
          </button>

          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="bottom"
            data-mdb-content="Vivamus
          sagittis lacus vel augue laoreet rutrum faucibus."
          >
            Popover on bottom
          </button>

          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="left"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
          >
            Popover on left
          </button>

下次点击时关闭

使用 focus 触发器可消除用户下次点击其他对象时弹出的窗口 元素比切换元素。

下次单击时需要关闭的特定标记：
为了确保正确的跨浏览器和跨平台行为，您必须使用 <a> 标签， not 的<button> 标签，您也 必须包含一个 标签索引 属性。

Dismissible popover 

          <a
            tabindex="0"
            class="btn btn-lg btn-danger"
            role="button"
            data-mdb-toggle="popover"
            data-mdb-trigger="focus"
            title="Dismissible popover"
            data-mdb-content="And here's some amazing content. It's very engaging. Right?"
            >Dismissible popover</a
          >

禁用元素

具有 disabled 属性的元素不是交互式的，这意味着用户不能 悬停鼠标或单击它们以触发弹出窗口（或工具提示）。解决方法是，您需要触发 包装器的弹出窗口 <div> 要么 <span> 并覆盖 禁用元素上的 pointer-events 。

对于禁用的弹出触发器，您可能还希望data-mdb-trigger="hover" 所以 该弹出窗口是对用户的即时视觉反馈，因为他们可能不会期望 点击在一个禁用的元素上。 


          <span
            class="d-inline-block"
            data-mdb-toggle="popover"
            data-mdb-content="Disabled popover"
          >
            <button class="btn btn-primary" style="pointer-events: none" type="button" disabled>
              Disabled button
            </button>
          </span>

约夏克布丁 - API

用法

通过JavaScript：


          const exampleEl = document.getElementById('example')
          const popover = new mdb.Popover(exampleEl, options)

Making popovers work for keyboard and assistive technology users

要允许键盘用户激活您的弹出框，您应该只将其添加到HTML元素中 传统上可以以键盘为焦点且具有交互性（例如链接或表单控件）。 尽管任意HTML元素（例如 <span>s）可以通过添加 tabindex="0" 属性，这将添加潜在的令人讨厌和混乱的标签 停止针对键盘用户的非交互式元素和大多数辅助技术 目前在这种情况下不宣布弹出窗口的内容。此外，不要依赖 仅在 hover 上触发弹出式窗口，因为这会使它们 无法触发键盘用户。

虽然您可以使用 html 选项，我们强烈建议您避免添加过多的 内容。弹出式窗口目前的工作方式是，一旦显示，其内容将与 具有 aria- describeby 属性的触发元素。结果，整个 弹出窗口的内容将在很长一段时间内向辅助技术用户宣布， 流不间断。

此外，虽然还可以包括交互式控件（例如表单元素） 或链接）（通过将这些元素添加到 allowList 或允许的属性和标签），请注意，当前弹出框 不管理键盘焦点顺序。当键盘用户打开弹出窗口时，焦点仍然停留在 触发元素，并且弹出窗口通常不会立即跟随触发 文件的结构，无法保证前进/按下 TAB 会将键盘用户移至弹出窗口本身。简而言之，只需添加 弹出式窗口的交互式控件可能会使这些控件无法访问/无法使用 键盘用户和辅助技术用户，或者至少造成不合逻辑的情况 总体焦点顺序。在这种情况下，请考虑使用模式对话框。

选件

可以通过数据属性或JavaScript传递选项。对于数据属性，请附加 选项名称为 data-mdb-，如 data-mdb-animation="".

注意：出于安全原因，消毒， 无法使用数据提供 sanitizeFn 和 allowList 选项 属性。

Name Type Default Description
animation boolean true Apply a CSS fade transition to the popover
container string | element | 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.

content string | element | function ''

Default content value if data-mdb-content attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

customClass string | function ''

Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.

You can also pass a function that should return a single string containing additional class names.

delay number | object 0

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }
html boolean false Insert HTML into the popover. If false, innerText property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'right'

How to position the popover - auto | top | bottom | left | right.
When auto is specified, it will dynamically reorient the popover.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

selector string | false false If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template string '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

.popover-arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.

title string | element | function ''

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

trigger string 'click' How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
offset number | string 0 Offset of the popover relative to its target. For more information refer to Popper's offset docs.
fallbackPlacement string | array 'flip' Allow to specify which position Popper will use on fallback. For more information refer to Popper's behavior docs
boundary string | element 'scrollParent' Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitize boolean true Enable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
allowList object Default value Object which contains allowed attributes and tags
sanitizeFn null | function null Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
popperConfig null | object null To change Bootstrap's default Popper config, see Popper's configuration

Data attributes for individual popovers:
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

方法

异步方法和转换：
所有API方法都是异步并开始过渡。 转换开始后，他们会立即返回给呼叫者，但 在结束之前。另外，在 转换组件将被忽略。

Method Description
show Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.mdb.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
hide Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.mdb.popover event occurs). This is considered a “manual” triggering of the popover.
toggle Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.mdb.popover or hidden.mdb.popover event occurs). This is considered a “manual” triggering of the popover.
dispose Hides and destroys an element’s popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.
enable Gives an element’s popover the ability to be shown. Popovers are enabled by default.
disable Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.
toggleEnabled Toggles the ability for an element’s popover to be shown or hidden.
update Updates the position of an element’s popover.
getInstance Static method which allows you to get the popover instance associated with a DOM element. 

        const exampleTriggerEl = document.getElementById('example')
        const popover = new mdb.Popover(exampleTriggerEl)
        popover.show()

大事记

Event type Description
show.mdb.popover This event fires immediately when the show instance method is called.
shown.mdb.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.mdb.popover This event is fired immediately when the hide instance method has been called.
hidden.mdb.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.mdb.popover This event is fired after the show.mdb.popover event when the popover template has been added to the DOM. 

          const myPopoverTrigger = document.getElementById('myPopover')
          myPopoverTrigger.addEventListener('hidden.mdb.popover', () => {
            // do something...
          })

进口

MDB UI KIT也可以与模块捆绑器一起使用。使用以下代码导入此组件：


          import { Popover } from 'mdb-ui-kit';