我可以在 twitter-bootstrap popover 数据内容中使用 html 标签吗？

Posted 2023-02-22

【中文标题】我可以在 twitter-bootstrap popover 数据内容中使用 html 标签吗？

【英文标题】：Can I use html tags in twitter-bootstrap popover data-content?

【发布时间】：2012-01-19 15:01:32

【问题描述】：

我在 Rails 3.1.3 应用程序中使用 Twitter-Bootstrap。我有许多带有弹出框的元素，例如：

<a data-original-title="Quality" rel="popover" data-content="Did they do a good job?  5 for Really Nice, 4 for Good Enough, 3 for Average, 2 for Somewhat OK, 1 for Really Bad">Q</a>

我想在内容部分有一个有序列表，类似于：

<OL reversed="reversed">
  <LI> for Really Nice </LI>
  <LI> for Good Enough </LI>
  ...
</OL>

有没有不修改 javascript 的简单方法？无论我尝试什么，html 代码都会显示在浏览器上，而不是被解释为这样。

更新

按照大卫的建议使用以下代码

link_to 'Q', '#', options:  data-original-title: "Quality", rel: 'popover', data-content: "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe 

使用我的设置生成语法错误。我认为这解释了原因：Ruby 1.9 hash with a dash in a key。所以我正在使用：

<%= link_to 'Q', '#', options:  :"data-original-title" => "Quality", :rel => 'popover', :"data-content" => "Did they do a good job? <ol><li> for Really Nice </li></ol>".html_safe  %>

这不起作用。它会生成以下 HTML：

<a href="#" options=":&quot;data-original-title&quot;=&gt;&quot;Quality&quot;, :rel=&gt;&quot;popover&quot;, :&quot;data-content&quot;=&gt;&quot;Did they do a good job? &lt;ol&gt;&lt;li&gt; for Really Nice &lt;/li&gt;&lt;/ol&gt;&quot;">Q</a>

【参考方案1】：

您需要创建一个启用了html 选项的弹出框实例（将其放在弹出框JS代码之后的javascript文件中）：

$('.popover-with-html').popover( html : true );

那么链接语法将是：

<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#some_content_object.html_safe") %>

如果您要动态生成内容，那么您需要像 David 建议的那样使用 html_safe，这样 Rails 就不会转义 HTML 代码。否则，您可以直接将 HTML 放在该内容属性中。

【讨论】：

使用此解决方案可以正确传递 HTML 选项。然而，HTML 仍然没有被解释为数据内容。这是 Firefox 显示的内容：问

在 Chrome 和 Firefox 中都适合我。

为什么他们的文档中没有这个？

@nilskp 如果您认为应该在 GitHub 上向他们提交问题。

@iWasRobbed，在一个完美的世界里我会的。

【参考方案2】：

是的，你可以这样做，但你需要在你的字符串上调用html_safe（如果字符串是由 Rails 生成的）

link_to 'Q', '#', :title => "Quality", :rel => 'popover', "data-content" => "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe 

【讨论】：

谢谢大卫！我试过你的建议，我认为这是正确的道路。但是，“data-original-title”和“data-content”不是可以传递给 link_to 的有效 HTML 属性。 “title”代替“data-original-title”工作。我找不到任何可以代替“数据内容”的东西。有什么建议吗？

您应该能够在 options 哈希中传递它们。请参阅我的更新答案。

使用 Ruby 1.9.2，您的代码会产生语法错误。我不得不使用 "Quality", :rel => 'popover', :"data-content" => "他们做得好吗？

如果您仍有问题，请告诉我。如果它有效，您能否将答案标记为已接受，以便未来的用户可以轻松找到他们问题的答案？

没问题，iWasRobbed。您的解决方案显然是正确的解决方案（我已经赞成）。我只是觉得应该将带有答案的问题标记为已解决，因为它使搜索解决方案变得更加容易。 OP，请将 iWasRobbed 的答案标记为正确。