我正在使用 Bootstrap 4，并且想要使用彈出窗口，當您單擊任意位置時，我可以將鼠標懸停在其中激活并關閉它。我還想讓鏈接在彈出窗口中工作。任何人都知道如何讓它發揮作用或者我錯過了什么？$(document).ready(function(){ $('[data-toggle="popover"]').popover({ placement : 'top', trigger : 'hover', html : true });});$('body').on('click', function (e) { //only buttons if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('[data-toggle="popover"]').popover('hide'); }});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><a href="mailto:[email protected]" data-toggle="popover" title="Popover" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">Test</a><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
2 回答
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
要呈現鏈接，請使用html: true并顯示/隱藏彈出窗口，您可以使用以下代碼：
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
html: true
});
$('[data-toggle="popover"]').on("mouseenter", function() {
$(this).popover('show');
});
$('body').on('click', function(e) {
$('[data-toggle=popover]').each(function() {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
});
html, body{ height: 100%; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<a href="mailto:[email protected]" data-toggle="popover" title="Popover" data-content="test content <a href='#' title='test add link'>link on content</a>" data-original-title="test title">Test</a>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
滄海一幻覺
TA貢獻1824條經驗 獲得超5個贊
請在彈出窗口中添加html: true，以便它可以呈現 HTML。
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger : 'hover',
html: true
});
});
$('body').on('click', function (e) {
//only buttons
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
//buttons and icons within buttons
/*
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('[data-toggle="popover"]').length === 0
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
*/
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<a href="mailto:[email protected]" data-toggle="popover" title="Popover" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">Test</a>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
- 2 回答
- 0 關注
- 284 瀏覽
添加回答
舉報
0/150
提交
取消