Как показывать ссылки и многое другое в twitter bootstraps popover?

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> 

Это действительно кажется хорошо и содержание показано когда я нажимаю значок, но я хотел бы иметь некоторые ссылки и перерывы и прочее в этом контейнере popover. Как я могу это сделать?

Answer 1

Да, вы можете. Попробуйте использовать поповер 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> 

Script

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

Answer 2

Для этого вам не нужно использовать 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. Если ваш редактор не произойдет, вы можете использовать онлайн-инструмент, как этот: http://www.htmlescape.net/htmlescape_tool.html

---

Update: Другой подход, чтобы добавить разметку самого документа 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() 
}); 

Это лучший подход (на мой взгляд). Легче читать и поддерживать - нет HTML внутри вашего javascript или внутри атрибута data-content.