HTML внутри Twitter Bootstrap popover

вы можете использовать атрибут data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>

Вам нужно создать экземпляр popover с включенной опцией html (поместите это в свой javascript файл после всплывающего JS-кода):

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

Другой способ указать содержимое popover в многоразовом виде - создать новый атрибут данных, например data-popover-content, и использовать его следующим образом:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Это может быть полезно, когда у вас есть много html для размещения в ваших popovers.

Вот пример скрипта: http://jsfiddle.net/z824fn6b/

Я использовал pop-in внутри списка, Im, дающий пример через HTML

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>

Это небольшая модификация Отличный ответ Джека.

Следующее гарантирует, что простые popovers без содержимого HTML остаются незатронутыми.

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Это старый вопрос, но это еще один способ: использовать jQuery для повторного использования popover и продолжать использовать исходные атрибуты данных начальной загрузки, чтобы сделать его более семантическим:

Ссылка

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

Пользовательский контент для отображения

<!-- Let show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

Скрипт с полным примером: http://jsfiddle.net/tomsarduy/262w45L5/

Мне очень жаль помещать длинный HTML внутри атрибута, вот мое решение, ясное и простое (замените? на что угодно):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

затем

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

Вы можете изменить 'template/popover/popover.html' в файле 'ui-bootstrap-tpls-0.11.0.js' Напишите: "bind-html-unsafe" вместо "ng-bind"

Он покажет все popover с помощью html. * его небезопасный html. Используйте только в том случае, если вы доверяете html.