HTML dentro de Twitter Bootstrap popover

Estoy tratando de mostrar HTML dentro de una ventana emergente de bootstrap, pero de alguna manera no está funcionando. He encontrado algunas respuestas aquí, pero no va a funcionar para mí. Por favor, 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>
Author: ROMANIA_engineer, 2012-11-03
Source

9 answers

No puedes usar <li href="#" ya que pertenece a <a href="#" por eso no funcionaba, cámbialo y todo está bien.

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

Las partes pertinentes del código se encuentran 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 necesita al menos $("[data-toggle=popover]").popover(); para habilitar la ventana emergente. Pero en lugar de data-toggle="popover" también puedes usar id="my-popover" o class="my-popover". Simplemente recuerde habilitarlos usando por ejemplo: $("#my-popover").popover(); en esos casos.

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

Bono:

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

[11] Salud.
 302
Author: Mauno Vähä,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-02 08:17:59

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>
 241
Author: Dennis Knochenwefel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-06 08:12:12

Necesita crear una instancia emergente que tenga habilitada la opción html (coloque esto en su archivo javascript después del código JS emergente):

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

 75
Author: Mike Lucid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-02 21:59:55

Otra forma de especificar el contenido emergente de una manera reutilizable es crear un nuevo atributo de datos como data-popover-content y usarlo de esta manera:

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 tienes mucho html para colocar en tus popovers.

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

 74
Author: Jack,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-29 12:25:35

He utilizado un pop encima 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>'>
 20
Author: user3319310,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-17 13:26:25

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

Lo siguiente garantiza 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();
        }
    });
});
 6
Author: Marc A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:21

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>

Entonces

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
 3
Author: user1079877,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-27 08:10:10

Esta es una pregunta antigua, pero esta es otra forma, usando jQuery para reutilizar el popover y seguir usando los atributos de datos de bootstrap 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 ejemplo completo: http://jsfiddle.net/tomsarduy/262w45L5 /

 3
Author: Tom Sarduy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-02 06:51:41

Puede cambiar el 'template/popover/popover.html 'in file' ui-bootstrap-tpls-0.11.0.js" Escriba: "bind-html-unsafe "en lugar de"ng-bind"

Mostrará todo el popover con html. * su html inseguro. Úselo solo si confía en el html.

 2
Author: Guy Biber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-04 07:43:01