HTML w oknie popover Bootstrap

288

Próbuję wyświetlić HTML w oknie popover bootstrap, ale jakoś nie działa. Znalazłem tutaj odpowiedzi, ale to nie działa dla mnie. Daj mi znać, jeśli coś robię źle.

<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>
Adrian Mojica
źródło
1
Odpowiedziałem na to samo pytanie tutaj: Kod normalizacji
Olga,

Odpowiedzi:

351

Nie możesz używać, <li href="#"ponieważ należy do <a href="#"tego, dlatego nie działał, zmień go i wszystko jest w porządku.

Oto działający JSFiddle, który pokazuje, jak utworzyć popover bootstrap.

Odpowiednie części kodu znajdują się poniżej:

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

A tak przy okazji, zawsze potrzebujesz przynajmniej $("[data-toggle=popover]").popover();włączyć popover. Ale zamiast data-toggle="popover"ciebie możesz również użyć id="my-popover"lub class="my-popover". Pamiętaj tylko, aby włączyć je za pomocą np .: $("#my-popover").popover();w takich przypadkach.

Oto link do pełnej specyfikacji: Bootstrap Popover

Premia:

Jeśli z jakiegoś powodu nie lubisz lub nie możesz odczytać zawartości wyskakującego okienka z tagów data-togglei title. Możesz także użyć np. Ukrytych div i nieco więcej JavaScript. Oto przykład na ten temat.

Mauno Vähä
źródło
1
Usuń HREF href = "#" na elementach znacznika ANCHOR, aby zapobiec przewijaniu do góry strony!
peter_pilgrim
@peter_pilgrim Dzięki, że to powiedziałeś. Zaktualizowałem moją odpowiedź, aby używać najnowszej wersji bootstrap i usunąłem href = "#" ze znaczników <a> i sprawiłem, że zachowują się jak przyciski. (Jest to również udokumentowane na stronie bootstrap). Dodano ten link na końcu mojej odpowiedzi.
Mauno Vähä
Znalazłem problem z urządzeniami iOS. Popover działa z ekranem dotykowym. Znalazłeś ogólne rozwiązanie? Właściwie myślę, że dzieje się tak również w przypadku kodu popover Bootstrap. Jakieś pomysły?
peter_pilgrim
286

możesz użyć atrybutu 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>
Dennis Münkle
źródło
Czy istnieje sposób na użycie go w gwtbootstrap3, nie działa w tej formie. Zadałem pytanie tutaj stackoverflow.com/questions/34142815/... , ale jak dotąd nie otrzymałem odpowiedzi.
ivan_bilan,
Nie wiem, dlaczego powyższa odpowiedź została oznaczona jako poprawna. Może ludzie celowo wybierają najbardziej skomplikowaną opcję zachowania swoich miejsc pracy.
stephen
Mam ten popover na dole mojej strony i działa świetnie, z wyjątkiem ... Przenosi mnie z powrotem na górę strony. Mam to ustawione w pętli foreach miniaturek bootstrap. Jakieś pomysły?
foxtangocharlie
107

Innym sposobem określenia zawartości popover w sposób wielokrotnego użytku jest utworzenie nowego atrybutu danych, takiego jak data-popover-contenti użycie go w następujący sposób:

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

Może to być przydatne, gdy masz dużo html do umieszczenia w swoich popovers.

Oto przykładowe skrzypce: http://jsfiddle.net/z824fn6b/

Jacek
źródło
1
To modułowe podejście jest dość eleganckie. Możesz mieć wiele popoverów i tylko jedną ogólną funkcję javascript.
xtian
2
To świetnie, @Jack, dziękuję. Uwielbiam nie umieszczać HTML w atrybutach. Taki bałagan.
John Washam,
Niesamowita praca tutaj, uwielbiam prostotę i użyteczność
FastTrack
Ty prawdziwy MVP
plushyObject
Wygląda na to, że nie działa z bootstrap 3.4.1, czy możesz pomóc? @Jack stackoverflow.com/questions/60514533/…
user2513846
84

Musisz utworzyć instancję popover z włączoną opcją html (umieść to w pliku javascript po kodzie popover JS):

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

Mike Lucid
źródło
22

Użyłem wyskakującego okienka na liście, podam przykład za pośrednictwem 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>'>
użytkownik3319310
źródło
1
najprostsze podejście przy użyciu różnych cudzysłowów do zawijania kodu HTML. Niezłe myślenie.
Jimmy Ilenloa,
Fajnie, faktyczną sztuczką jest zamiana podwójnych cytatów na pojedyncze!
Steven Barragán
9

Musisz tylko wstawić data-html="true"link popover. Będzie działać.

Tiago Piovesan
źródło
6

To niewielka modyfikacja doskonałej odpowiedzi Jacka .

Poniższe informacje gwarantują, że proste okienka pop bez zawartości HTML pozostaną niezmienione.

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();
        }
    });
});
Marc A.
źródło
4

Naprawdę nie lubię umieszczać długiego HTML wewnątrz atrybutu, oto moje rozwiązanie, jasne i proste (zamień? Na cokolwiek chcesz):

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

następnie

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
użytkownik1079877
źródło
4

To stare pytanie, ale jest to inny sposób, używając jQuery do ponownego użycia programu popover i do dalszego używania oryginalnych atrybutów danych bootstrap, aby uczynić go bardziej semantycznym:

Połączenie

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

Treści niestandardowe do wyświetlenia

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

Fiddle z kompletnym przykładem: http://jsfiddle.net/tomsarduy/262w45L5/

Tom Sarduy
źródło
2

Możesz zmienić „szablon / popover / popover.html” w pliku „ui-bootstrap-tpls-0.11.0.js” Zapis: „bind-html-unsafe” zamiast „ng-bind”

Pokaże wszystkie popover z HTML. * jego niebezpieczny HTML. Używaj tylko, jeśli ufasz HTML.

Guy Biber
źródło
0

Możesz użyć zdarzenia popover i kontrolować szerokość za pomocą atrybutu „data-width”

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

Vĩnh Phú Ngô
źródło
-1

Dodaj to na dole pliku popper.js:

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

Źródło: https://github.com/twbs/bootstrap/issues/23590

Stef Van Looveren
źródło