Vous ne pouvez pas utiliser <li href="#"
car il appartient <a href="#"
c'est pourquoi il ne fonctionnait pas, le changer et c'est du tout bon.
J'ai créé exemple de liste de violon qui vous montre cela, j'espère que ça aide! voir tripoter! :)
Edit:
Créée mieux de jouer avec des explications: peut être vu de mieux violon exemple
Reliant également les parties pertinentes du code ici:
HTML:
<!-- Popover Example 1 - HTML -->
<!-- Popover using HTML to set content and title -->
<!-- Still requires at least $("[data-toggle=popover]").popover(); to enabled it via JavaScript! -->
<!-- Alternatively, you can use id="myPopover" or class="myPopover" no need to use data-toggle tag (!) -->
<!-- Just remember to change JavaScript to e.g., $("#myPopover").popover(); in those cases, see example 2 -->
<a href="#"
data-toggle="popover"
data-html="true"
data-content="<div><b>Popover Example</b> 1 - Content</div>"
title="Popover Example <b>1</b> - Title">Popover Example 1</a>
<br /><br />
<!-- Popover Example 2 - JS -->
<!-- Popover using JavaScript to set content from hidden div -->
<a href="#" id="popoverExampleTwo">Popover Example 2</a>
<!-- Popover 2 hidden content -->
<div id="popoverExampleTwoHiddenContent" style="display: none">
<div><b>Popover Example</b> 2 - Content</div>
</div>
<!-- Popover 2 hidden title -->
<div id="popoverExampleTwoHiddenTitle" style="display: none">
Popover Example <b>2</b> - Title
</div>
JavaScript:
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#popoverExampleTwo").popover({
html : true,
content: function() {
return $('#popoverExampleTwoHiddenContent').html();
},
title: function() {
return $('#popoverExampleTwoHiddenTitle').html();
}
});
});