Question

假设你有一个只有图标的无序列表（这里只有一个）：

<ul>
     <li class="in-row"><a href="#" id="meddelanden" data-content="Content here..." 
          data-title="Meddelanden" data-toggle="clickover" data-placement="left">
          <i class="icon-globe"></i></a>
     </li>
</ul>

将这些包含的文件包含在您的html文档中：

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script>
         $('#meddelanden').popover('animate');
    </script>

它看起来很好，当我按下图标时会显示内容，但我希望在该弹出窗口容器中有一些链接和中断和内容。我怎么能这样做？

Answer 1

您不需要使用javascript。您可以使用data-html和data-content来实现这一目标。

尝试设置data-html="true"并将转义的html插入您的data-content属性中。就像这样：

<ul>
     <li class="in-row"><a href="#" id="meddelanden" data-content="&lt;hr&gt;Sample html&lt;br&gt;" 
          data-title="Meddelanden" data-toggle="clickover" data-placement="left" data-html="true">
          <i class="icon-globe"></i></a>
     </li>
</ul>

某些文本编辑器提供内置的HTML Escape工具。如果你的编辑没有，你可以使用像这样的在线工具： http://www.htmlescape.net/htmlescape_tool.html

的更新 的另一种方法是将标记添加到html文档本身（作为隐藏容器）并使用javascript创建工具提示：

<强> HTML

<div id="tooltip-content" style="display: none;"> <p>Tooltip content goes here</p> </div>

<强>的Javascript

$('#element').tooltip({ html: true, title: $('#tooltip-content').html() });

这是一种更好的方法（在我看来）。更易于阅读和维护 - 您的JavaScript内部或属性data-content内没有HTML。

Answer 2

是的，你可以。尝试使用popover content和html属性... See Doc

http://jsfiddle.net/4jhzg/

<强> HTML

<ul>
     <li class="in-row"><a href="#" id="meddelanden"  
          data-title="Meddelanden" data-toggle="clickover" data-placement="right">
         <i class="icon-globe"></i></a>
     </li>
</ul>

<强>脚本

var elem = '<div><a href="google.com">google</a></div>';
$('#meddelanden').popover({animation:true, content:elem, html:true});

如何在twitter bootstraps popover中显示链接和更多内容？

2 个答案: