2

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

<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>

它确实看起来不错，并且当我按下图标时会显示内容，但我想在那个弹出框容器中有一些链接和中断和东西。我怎样才能做到这一点？

4

2 回答 2

4

你不需要为此使用javascript。您可以使用data-htmlanddata-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 或属性内没有 HTML data-content。

于 2013-04-25T16:51:10.997 回答
2

是的你可以。尝试使用弹出框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});
于 2013-04-25T16:40:09.367 回答