如何在Bootstrap 3 Popover中通过数据内容属性传递HTML内容

How to Pass HTML Content in Bootstrap 3 Popover Through data-content Attribute

本文关键字：属性 内容 HTML 数据 Bootstrap Popover      更新时间：2023-09-26

演示

我知道我们可以通过JavaScript在Bootstrap Popover中传递HTML内容，但我只是想知道是否有一种方法可以在不使用JavaScript的情况下通过data-content传递内容，比如：

var ecoloInfoTable = "<strong>Yes This is Data</strong>";
var data = '<button type="button" class="btn btn-success btn-xs" data-container="body" data-toggle="popover" data-placement="top" data-content="'+ecoloInfoTable+'"> <i class="fa fa-question"></i></button>';
 $(".container").append(data);
$("[data-toggle=popover]").popover();

感谢

有一个选项可以在popover中启用HTML内容。此选项可以通过JavaScript传递，例如

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

或HTML格式（，这是您所要求的），例如

<div class="container">
  <button type="button" class="btn btn-success btn-xs" data-container="body" data-toggle="popover" data-placement="top" data-content="In this title I have <b>bold</b> text" data-html="true"> 
    <i class="fa fa-question"></i>
  </button>
</div>
<script>
   // Initializing popover without options
    $("[data-toggle=popover]").popover();
</script>

正如您在这个演示中看到的，您可以在title属性中包含HTML，并且它可以在popover中正确显示。

相关文章：