是否可以使用 div 作为 Twitter Popover 的内容

我正在使用 twitter 的 bootstrap 弹出窗口here。现在，当我滚动弹出窗口文本时，会出现一个弹出窗口，其中仅包含来自<a>'s data-content属性。我想知道是否有办法放一个<div>在弹出窗口内。潜在地，我想在那里使用 php 和 mysql，但如果我能让一个 div 工作，我想我可以弄清楚剩下的事情。我尝试将数据内容设置为div身份证了，但是没用。

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

首先，如果你想在内容中使用 HTML，你需要将 HTML 选项设置为 true：

$('.danger').popover({ html : true});

然后你有两个选项来设置 Popover 的内容

• 使用数据内容属性。这是默认选项。
• 使用返回 HTML 内容的自定义 JS 函数。

使用数据内容: 您需要转义 HTML 内容，如下所示：

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

您可以手动转义 HTML 或使用函数。我不了解 PHP，但在 Rails 中我们使用html_安全.

使用 JS 函数: 如果您这样做，您有多种选择。我认为最简单的方法是将 div 内容隐藏在您想要的任何位置，然后编写一个函数将其内容传递给弹出窗口。像这样的事情：

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

然后你的 HTML 看起来像这样：

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

PS：我在使用弹出框并且未设置标题属性时遇到了一些麻烦......所以，请记住始终设置标题。