javascript - 如何通过 data-content 属性在 Bootstrap 3 Popover 中传递 HTML 内容

Question

Demo

我知道我们可以通过 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();

谢谢

Answer 1

有一个选项可以在弹出窗口中启用 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>

正如您在 this demo 中看到的那样，您可以在 title 属性中包含 HTML，它可以在弹出窗口中正确显示。