HTML dentro do popover do Twitter Bootstrap

Estou tentando exibir HTML dentro de um popover de inicialização, mas de alguma forma não está funcionando. Encontrei algumas respostas aqui, mas não vai funcionar para mim. Por favor, deixe-me saber se estou fazendo algo errado.

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

Você não pode usá- <li href="#"lo, pois <a href="#"é por isso que não estava funcionando. Altere-o e está tudo bem.

Aqui está o JSFiddle trabalhando, que mostra como criar popover de autoinicialização.

Partes relevantes do código estão abaixo:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

E, a propósito, você sempre precisa pelo menos $("[data-toggle=popover]").popover();ativar a popover. Mas no lugar de data-toggle="popover"você também pode usar id="my-popover"ou class="my-popover". Lembre-se de habilitá-los usando, por exemplo: $("#my-popover").popover();nesses casos.

Aqui está o link para a especificação completa: Bootstrap Popover

Bônus:

Se, por algum motivo, você não gostar ou não puder ler o conteúdo de um pop-up nas tags data-togglee title. Você também pode usar, por exemplo, divs ocultos e um pouco mais de JavaScript. Aqui está um exemplo sobre isso.

você pode usar o atributo 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>

Outra maneira de especificar o conteúdo de popover de maneira reutilizável é criar um novo atributo de dados data-popover-contente usá-lo assim:

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();
        }
    });
});

Isso pode ser útil quando você tem muito html para colocar em seus popovers.

Aqui está um exemplo de violino: http://jsfiddle.net/z824fn6b/

Você precisa criar uma instância de popover com a opção html ativada (coloque isso no seu arquivo javascript após o código JS do popover):

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

Eu usei um pop dentro de uma lista, estou dando um exemplo via 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>'>

Você só precisa colocar data-html="true"o popover do link. Vai dar certo

Esta é uma pequena modificação na excelente resposta de Jack .

A seguir, os popovers simples, sem conteúdo HTML, permanecem inalterados.

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();
        }
    });
});

Eu realmente odeio colocar HTML longo dentro do atributo, aqui está a minha solução, clara e simples (substitua? Pelo que você quiser):

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

então

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

Essa é uma pergunta antiga, mas é outra maneira, usando o jQuery para reutilizar o popover e continuar usando os atributos de dados de autoinicialização originais para torná-lo mais semântico:

A ligação

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

Conteúdo personalizado para mostrar

<!-- Let's 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;
    }
});

Mexa com exemplo completo: http://jsfiddle.net/tomsarduy/262w45L5/

Você pode alterar o 'template / popover / popover.html' no arquivo 'ui-bootstrap-tpls-0.11.0.js' Write: "bind-html-unsafe" em vez de "ng-bind"

Ele mostrará todo o popover com html. * seu html inseguro. Use somente se você confiar no html.

Você pode usar o evento popover e controlar a largura pelo atributo 'data-width'

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});

 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>

Adicione isso na parte inferior do seu arquivo popper.js:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

Fonte: https://github.com/twbs/bootstrap/issues/23590