Bootstrap 4 Popper.js：如何動態更新彈出窗口的內容？

Question

我正在嘗試使用來自服務器的Ajax返回的html內容更新來自popper.js的彈出popper.js的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";

Answer 1

您可以使用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);
  },
})