Jak zrobić Popover Bootstrap pracować z treścią HTML w osobnym elemencie

Question

Jestem w trakcie łączenia paneli Bootstrap z funkcją Popover Bootstrap. Celem jest pokazanie popover, gdy użytkownik unosi nagłówek panelu. Mam już to do pracy, z wyjątkiem tego, że część data-content="" staje się dość trudna do kontrolowania, gdy zawiera dużo HTML.

Poniżej znajduje się przykładowy kod HTML, nad którym pracuję. Część, która mówi „ŁADUNKI HTML” zawiera div, stół, w p'S, itp

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

Inne wtyczki Bootstrap rozwiązać ten problem, pozwalając na umieszczenie HTML w osobny element, a następnie odwoływać się do tego elementu z " cel danych ". Niestety Popover nie obsługuje tego. Jak naśladować to zachowanie bez pisania kodu JavaScript specyficznego dla elementu?

Answer 1

Eleganckie rozwiązanie polega na umieszczeniu treści HTML wewnątrz znacznika skryptu z identyfikatorem, a następnie dodaniu atrybutu data-target="element_id_goes_here" do elementu, który uruchomi popover. Ponieważ używasz popover, powinieneś już mieć jakiś rodzajowy JavaScript, który zainicjuje wtyczkę. Możesz rozszerzyć ten JavaScript za pomocą kilku linii kodu.

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

Dowolny tekst/HTML chcesz wyświetlić w popover mogą być dodawane w DIV który ma właściwość display:none; CSS do niego. Możesz przekazać funkcję do właściwości content opcji popover, która pobiera zawartość z ukrytego DIV. W ten sposób nie trzeba odwoływać się do ID i wstawiać znaczników skryptu.

Oto przykład 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

Rozwiązanie, oparte na Martin Devillers postu, ale bardziej elastyczny (przechodzi wszystkie znaczniki danych- * w 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); 
});