html - content - popover bootstrap
HTML dentro de Twitter Bootstrap popover (9)
Estoy intentando mostrar HTML dentro de un popover bootstrap, pero de alguna manera no está funcionando Encontré algunas respuestas aquí pero no funcionará para mí. Por favor, hágamelo 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>
Debe crear una instancia emergente que tenga la opción html habilitada (coloque esto en su archivo javascript después del código JS emergente):
$(''.popover-with-html'').popover({ html : true });
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();
}
});
});
Esta es una pregunta antigua, pero esta es otra forma, utilizando 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 el ejemplo completo: http://jsfiddle.net/tomsarduy/262w45L5/
No puede usar <li href="#" ya que pertenece a <a href="#" por eso no funcionó, cámbielo y todo está bien.
Aquí está trabajando JSFiddle que le muestra cómo crear popover bootstrap.
Las partes relevantes 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 necesitas al menos $("[data-toggle=popover]").popover(); para habilitar el popover. Pero en lugar de data-toggle="popover" también puedes usar id="my-popover" o class="my-popover" . Solo recuerda 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 de title y de data-toggle . También puedes usar, por ejemplo, divs ocultos y un poco más de JavaScript. Aquí hay un example de eso.
Aclamaciones.
Otra forma de especificar el contenido de la ventana emergente de una manera reutilizable es crear un nuevo atributo de data-popover-content como el data-popover-content y 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 muchos html para colocar en sus ventanas emergentes.
Aquí hay un ejemplo de violín: http://jsfiddle.net/z824fn6b/
Puede cambiar ''template / popover / popover.html'' en el archivo ''ui-bootstrap-tpls-0.11.0.js'' Escribir: "bind-html-unsafe" en lugar de "ng-bind"
Se mostrará todo el popover con html. * Su HTML inseguro. Use solo si confía en el 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>
entonces
var help = $(''.popover-dismiss'');
help.attr(''data-content'', help.html()).text('' ? '').popover({trigger: ''hover'', html: true});
Utilicé un pop sobre 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>''>
puede 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>