Вы также можете попробовать этот вариант, если он вам нужен почти во всех местах на странице.
U можно настроить его в общем виде, а затем просто использовать.
Таким образом, вытакже можно использовать элемент HTML и все, что вы хотите:)
$(document).ready(function()
{
var options =
{
placement: function (context, source)
{
var position = $(source).position();
var content_width = 515; //Can be found from a JS function for more dynamic output
var content_height = 110; //Can be found from a JS function for more dynamic output
if (position.left > content_width)
{
return "left";
}
if (position.left < content_width)
{
return "right";
}
if (position.top < content_height)
{
return "bottom";
}
return "top";
}
, trigger: "hover"
, animation: "true"
, html:"true"
};
$('[data-toggle="popover"]').popover(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h3>Popover Example</h3>
<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>
Добавление
Для настройки дополнительных параметров вы можете перейти здесь .
Еще больше можно найти здесь .
Обновление
Если вы хотитевсплывающее окно после щелчка, вы можете изменить опцию JS на trigger: "click", как это -
return ..;
}
......
, trigger: "click"
......
};
U также можете настроить его в HTML, добавив data-trigger="click", как это -
<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>
Я думаю, что это будет более ориентированный код, более пригодный для повторного использования и более полезный для всех:).