Question

我知道我们可以通过JavaScript在Bootstrap Popover中传递HTML内容，但只是想知道是否有办法通过data-content传递内容而不使用像：

这样的JavaScript

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

有一个选项可以在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>

正如您在this demo中所看到的，您可以在title属性中包含HTML，并在弹出框中正确显示。

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

1 个答案: