Estoy tratando de mostrar HTML dentro de un popover bootstrap, pero de alguna manera no funciona. He encontrado algunas respuestas aquí, pero no funciona para mí. Por favor, hágame saber 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 puedes usar <li href="#"ya que pertenece a
<a href="#"por eso no funcionaba, cámbialo y ya está todo bien.
Aquí está funcionando [JSFiddle][1] que muestra cómo crear el popover de bootstrap.
Las partes relevantes del código están abajo:
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();
para activar el popover. Pero en lugar de data-toggle="popover"también puedes utilizar
id="mi-popover"o class="mi-popover". Sólo recuerde habilitarlos usando, por ejemplo:
$("mi-popover").popover();` en esos casos.
Aquí está el enlace a la especificación completa: Bootstrap Popover
Bonus:
Si por alguna razón no te gusta o no puedes leer el contenido de un popup desde las etiquetas data-toggle
y title
. También puedes utilizar, por ejemplo, divs ocultos y un poco más de JavaScript. Aquí hay un [ejemplo][3] sobre eso.
Saludos.
puede utilizar 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>