Am încercat pentru a afișa HTML în interiorul unui bootstrap popover, dar cumva l's nu funcționează. Am găsit niște răspunsuri, dar nu o't de lucru pentru mine. Te rog, lasă-mă să știu dacă am'm a face ceva gresit.
<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>
Nu puteți utiliza <li href="#"
, deoarece acesta aparține `<a href="#" asta's de ce nu a fost't de lucru, schimba-l și-l's toate bune.
Aici este de lucru [JSFiddle][1] care vă arată cum să creați bootstrap popover.
Părțile relevante din codul este mai jos:
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();
});
Și apropo, ai mereu nevoie de cel putin $("[date-comutare=popover]").popover();
pentru a permite popover. Dar în loc de date de comutare="popover" puteți utiliza, de asemenea, id="mi-popover" " sau " class="mi-popover"
. Doar amintiți-vă să le permită utilizarea e.g: `$("# - mi-popover").popover (); în aceste cazuri.
Aici este link-ul de la completă spec.: Bootstrap Popover
Bonus:
Dacă pentru un motiv oarecare nu't place sau nu poate citi conținutul de un pop-up de date de comutare " și " titlu` categorie. Puteți folosi, de asemenea, de exemplu, ascunse divs și un pic mai mult JavaScript. Aici este un [exemplu][3] despre asta.
Noroc.
puteți folosi atributul de date în html="adevărat"`:
<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>
Un alt mod de a specifica popover conținut într-un reutilizabile este de a crea un nou atribut de date ca date popover-conținut și să-l utilizați ca aceasta:
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();
}
});
});
Acest lucru poate fi util atunci când aveți o mulțime de html pentru a plasa în popovers.
Aici este un exemplu vioara:
Am folosit un pop de peste intr-o lista, Im da un exemplu prin intermediul 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>'>
Aceasta este o ușoară modificare pe Jack's excelent raspuns.
Următoarele asigură simplu popovers, fără conținut HTML, rămân neafectate.
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();
}
});
});
Nu-mi place să pun lung HTML în interiorul atributului, aici este soluția mea, clar și simplu (înlocuiți ? cu ce vrei tu):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
apoi
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
Aceasta este o întrebare veche, dar acesta este un alt mod, folosind jQuery pentru a reutiliza popover și pentru a păstra folosind original bootstrap atribute de date pentru a face mai semantice:
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
<!-- 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>
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
Vioara cu exemplu complet:
Puteți schimba 'șablon/popover/popover.html' în fișier 'ui-bootstrap-tpls-0.11.0.js' Scrie: "bind-html-nesigur" în loc de "ng-bind"
Acesta vă va arăta toate popover cu html. *sa nesigur html. Utilizați numai dacă aveți încredere în html.
Puteți utiliza popover eveniment, și de a controla lățimea de atribut 'date-latime'
$('[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>