HTML dentro de popover Bootstrap de Twitter

Estoy tratando de mostrar HTML dentro de un popover bootstrap, pero de alguna manera no funciona. Encontré algunas respuestas aquí, pero no me funcionará. Avísame si estoy haciendo algo mal.

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

No se puede usar <li href="#"ya que pertenece a <a href="#"eso, por eso no estaba funcionando, cámbielo y está todo bien.

Aquí está trabajando JSFiddle que le muestra cómo crear popover bootstrap.

Las partes relevantes del código están a continuación:

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

Y, por cierto, siempre necesitas al menos $("[data-toggle=popover]").popover();habilitar el popover. Pero en lugar de data-toggle="popover"usted también puede usar id="my-popover"o class="my-popover". Solo recuerde habilitarlos usando, por ejemplo:$("#my-popover").popover(); en esos casos.

Aquí está el enlace a la especificación completa: Bootstrap Popover

Prima:

Si por alguna razón no le gusta o no puede leer el contenido de una ventana emergente de las etiquetas data-toggley title. También puede usar, por ejemplo, divs ocultos y un poco más de JavaScript. Aquí hay un ejemplo sobre eso.

puedes usar el 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>

Otra forma de especificar el contenido de popover de forma reutilizable es crear un nuevo atributo de datos como data-popover-contenty usarlo así:

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

Esto puede ser útil cuando tiene mucho html para colocar en sus popovers.

Aquí hay un ejemplo de violín: http://jsfiddle.net/z824fn6b/

Debe crear una instancia de popover que tenga habilitada la opción html (colóquela en su archivo javascript después del código JS de popover):

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

Usé un pop dentro de una lista, estoy dando un ejemplo a través de 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>'>

Solo necesita poner data-html="true"en el enlace popover. Va a funcionar

Esta es una ligera modificación en la excelente respuesta de Jack .

Lo siguiente asegura que los popovers simples, sin contenido HTML, no se vean afectados.

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

Realmente odio poner HTML largo dentro del atributo, aquí está mi solución, clara y simple (¿reemplazar? Con lo que quieras):

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

luego

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

Esta es una vieja pregunta, pero esta es otra forma, usando jQuery para reutilizar el popover y seguir usando los atributos de datos de arranque originales para hacerlo más semántico:

El enlace

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

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

Violín con un ejemplo completo: http://jsfiddle.net/tomsarduy/262w45L5/

Puede cambiar la 'plantilla / popover / popover.html' en el archivo 'ui-bootstrap-tpls-0.11.0.js' Escriba: "bind-html-unsafe" en lugar de "ng-bind"

Mostrará todos los popover con html. * No es seguro HTML. Úselo solo si confía en el html.

Puede usar el evento popover y controlar el ancho por el atributo 'ancho de datos'

$('[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>

Agregue esto al final de su archivo popper.js:

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

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