HTML all'interno del popover Bootstrap di Twitter

Sto cercando di visualizzare HTML all'interno di un popover bootstrap, ma in qualche modo non funziona. Ho trovato alcune risposte qui ma non funzionerà per me. Per favore fatemi sapere se sto facendo qualcosa di sbagliato.

<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>

Non puoi usarlo <li href="#"poiché appartiene a <a href="#"questo perché non funzionava, cambiarlo ed è tutto a posto.

Qui funziona JSFiddle che ti mostra come creare popover bootstrap.

Le parti pertinenti del codice sono di seguito:

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

E comunque, devi sempre almeno $("[data-toggle=popover]").popover();abilitare il popover. Ma al posto data-toggle="popover"tuo puoi anche usare id="my-popover"o class="my-popover". Ricorda solo di abilitarli usando ad esempio: $("#my-popover").popover();in quei casi.

Ecco il link alla specifica completa: Bootstrap Popover

Bonus:

Se per qualche motivo non ti piace o non riesci a leggere il contenuto di un popup dai tag data-togglee title. Puoi anche usare ad esempio div nascosti e un po 'più di JavaScript. Ecco un esempio a riguardo.

puoi usare l'attributo 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>

Un altro modo per specificare il contenuto del popover in modo riutilizzabile è quello di creare un nuovo attributo di dati simile data-popover-contente usarlo in questo modo:

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

Questo può essere utile quando hai molti HTML da inserire nei tuoi popover.

Ecco un violino di esempio: http://jsfiddle.net/z824fn6b/

È necessario creare un'istanza di popover con l'opzione html abilitata (inserirla nel file javascript dopo il codice JS popover):

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

Ho usato un pop dentro un elenco, sto dando un esempio via 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>'>

Devi solo inserire data-html="true"il collegamento popover. Funzionerà.

Questa è una leggera modifica sull'ottima risposta di Jack .

Quanto segue assicura che i semplici popover, senza contenuto HTML, rimangano inalterati.

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

Odio davvero inserire HTML lungo all'interno dell'attributo, ecco la mia soluzione, chiara e semplice (sostituire? Con quello che vuoi):

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

poi

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

Questa è una vecchia domanda, ma questo è un altro modo, usando jQuery per riutilizzare il popover e continuare a usare gli attributi dei dati bootstrap originali per renderlo più semantico:

Il link

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

Contenuti personalizzati da mostrare

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

Violino con esempio completo: http://jsfiddle.net/tomsarduy/262w45L5/

Puoi cambiare il 'template / popover / popover.html' nel file 'ui-bootstrap-tpls-0.11.0.js' Scrivi: "bind-html-unsafe" invece di "ng-bind"

Mostrerà tutto il popover con html. * il suo HTML non sicuro. Usa solo se ti fidi dell'html.

Puoi utilizzare l'evento popover e controllare la larghezza tramite l'attributo '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>

Aggiungi questo in fondo al tuo file popper.js:

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

Fonte: https://github.com/twbs/bootstrap/issues/23590