Come faccio a far funzionare il popover Bootstrap con contenuto HTML in un elemento separato

Question

Sono in procinto di combinare i pannelli Bootstrap con la funzionalità di pop-up Bootstrap. L'obiettivo è mostrare un popover quando l'utente alza l'intestazione del pannello. Ho già capito questo, tranne che la parte data-content="" diventa abbastanza ingestibile quando contiene molto HTML.

Di seguito è riportato un esempio di codice HTML con cui sto lavorando. La parte che dice: "Un sacco di HTML" contiene div, Ping, pag di, ecc

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <i class="fa fa-briefcase fa-fw"></i> 
     <abbr title="Panel title" data-container="body" data-toggle="popover" 
       data-placement="bottom" data-trigger="hover" data-html="true" 
       data-content="<div>LOADS OF HTML HERE</div>"> 
      Panel title 
     </abbr> 
     <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;"> 
      <!-- some buttons go here --> 
     </div> 
    </div> 
    <!-- /.panel-heading --> 
    </div> 
    <!-- some panel content goes here --> 
</div> 

Altri plugin Bootstrap risolvere questo problema, consentendo di mettere il codice HTML in un elemento separato e quindi fare riferimento quell'elemento con un " attributo "target di dati". Sfortunatamente, Popover non supporta questo. Come faccio a riprodurre questo comportamento senza scrivere JavaScript specifico per elemento?

Answer 1

Una soluzione elegante è posizionare il contenuto HTML all'interno di un tag di script con un ID e quindi aggiungere un attributo data-target="element_id_goes_here" all'elemento che attiverà il popover. Dato che stai usando popover dovresti già avere qualche JavaScript generico da qualche parte che inizializza il plugin. È possibile estendere questo codice JavaScript con alcune righe di codice.

HTML

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <i class="fa fa-briefcase fa-fw"></i> 
     <abbr title="Panel title" data-container="body" data-toggle="popover" 
       data-placement="bottom" data-trigger="hover" data-html="true" 
       data-target="#my-popover-content"> 
      Panel title 
     </abbr> 
     <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;"> 
      <!-- some buttons go here --> 
     </div> 
    </div> 
    <!-- /.panel-heading --> 
    </div> 
    <!-- some panel content goes here --> 
</div> 

<script type="text/html" id="my-popover-content"> 
    *** HTML CONTENT GOES HERE *** 
</script> 

JavaScript

$("[data-toggle='popover']").each(function(index, element) { 
    var contentElementId = $(element).data().target; 
    var contentHtml = $(contentElementId).html(); 
    $(element).popover({ 
     content: contentHtml 
    }); 
}); 

Answer 2

Qualsiasi testo/HTML che si desidera visualizzare in popover può essere aggiunto in un DIV che ha una proprietà display:none; CSS ad esso. È possibile passare una funzione alla proprietà content delle opzioni del popover che ottiene il contenuto dallo DIV nascosto. In questo modo non è necessario fare riferimento per ID e inserire tag di script.

Ecco un esempio http://jsfiddle.net/wb3n8/

HTML:

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel title 1</h3> 

     </div> 
     <div class="panel-body">Panel content 1</div> 
     <div class="my-popover-content">Here is some hidden content 1</div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel title 2</h3> 

     </div> 
     <div class="panel-body">Panel content 2</div> 
     <div class="my-popover-content">Here is some hidden content 2</div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Panel title 3</h3> 

     </div> 
     <div class="panel-body">Panel content 3</div> 
     <div class="my-popover-content">Here is some hidden content 3</div> 
    </div> 
</div> 

CSS:

.my-popover-content { 
    display:none; 
} 

Javascript:

$(document).ready(function() { 
    popoverOptions = { 
     content: function() { 
      // Get the content from the hidden sibling. 
      return $(this).siblings('.my-popover-content').html(); 
     }, 
     trigger: 'hover', 
     animation: false, 
     placement: 'bottom', 
     html: true 
    }; 
    $('.panel-heading').popover(popoverOptions); 
}); 

Answer 3

soluzione, sulla base di Martin Devillers postale, ma più flessibile (passa tutti i tag data- * in bootstrap js)

$("[data-toggle='popover']").each(function (index, element) { 
    var data = $(element).data(); 
    if (data.target) { 
     var contentElementId = data.target; 
     var contentHtml = $(contentElementId).html(); 
     data.content = contentHtml; 
    } 
    $(element).popover(data); 
});