Ви не можете користуватися, <li href="#"
оскільки він належить до <a href="#"
цього, тому він не працював, змінити його і все добре.
Тут працює JSFiddle, який показує вам, як створити popover для завантаження.
Відповідні частини коду нижче:
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();
});
І, до речі, вам завжди потрібно хоча б $("[data-toggle=popover]").popover();
увімкнути поїзд. Але замість data-toggle="popover"
вас також можна використовувати id="my-popover"
або class="my-popover"
. Просто пам’ятайте, щоб увімкнути їх за допомогою, наприклад: $("#my-popover").popover();
у цих випадках.
Ось посилання на повну специфікацію:
Bootstrap Popover
Бонус:
Якщо з якоїсь причини вам не подобається чи не можете читати вміст спливаючого вікна із тегів data-toggle
та title
. Ви також можете використовувати, наприклад, приховані диви та трохи більше JavaScript. Ось приклад про це.