时间戳

首页 > 解决方案 > Bootstrap 4 Popper.js：如何动态更新弹出窗口的内容？

javascript - Bootstrap 4 Popper.js：如何动态更新弹出窗口的内容？

问题描述

我正在尝试使用popper.js从服务器以 ajax 返回的 html 内容来更新弹出窗口的 HTML 内容。

弹出窗口是在页面加载时创建的。在 HTML 中：

<a id="upvote-637" title="Popup" 
   data-toggle="popover" 
   data-content="<ul><li>item 1</li><li>Item 2</li></ul>" 
   data-remote="true" 
   href="/posts/637/upvote">
       Link text
</a>

在 Javascript 中：

$('[data-toggle="popover"]').popover({
  trigger: 'hover', 
  html: true
});

我想动态更新内容。我试过了 ：

// This is working to Toggle display
$("#upvote-637").popover('toggle') 
// This is not working to update the content  dynamically 
$("#upvote-637").popover('toggle')[0].dataset.content = "TEST";

标签： javascripthtmlbootstrap-4popper.js

解决方案

您可以使用 Tippy.js，它使用 Popper.js 作为其核心引擎，就像 Tooltip.js 一样。

使用 Tippy.js 更容易（它被构建为通过 ajax 轻松加载数据）：

tippy('#ajax-tippy', {
  content: 'Loading...',
  animateFill: false,
  animation: 'fade',
  flipOnUpdate: true,
  onShow(instance) {
    // call ajax; then use instance.setContent(responseText);
  },
})

推荐阅读