在悬停时激活 Popover 并单击任意位置关闭
Activate Popover on Hover and click anywhere to close
我正在使用 Bootstrap 4 并想使用弹出窗口,我可以将鼠标悬停在该弹出窗口上,当您单击任意位置时可以将其关闭。
我还想让 link 在弹出框内工作。任何人都知道如何让它工作或者我错过了什么?
$(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:test@test.com" 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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
请在您的弹出窗口中添加 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:test@test.com" 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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
要渲染 link,使用 html: true
和 show/hide 弹出框,您可以使用以下代码:
$(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:test@test.com" 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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
我正在使用 Bootstrap 4 并想使用弹出窗口,我可以将鼠标悬停在该弹出窗口上,当您单击任意位置时可以将其关闭。
我还想让 link 在弹出框内工作。任何人都知道如何让它工作或者我错过了什么?
$(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:test@test.com" 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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
请在您的弹出窗口中添加 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:test@test.com" 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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
要渲染 link,使用 html: true
和 show/hide 弹出框,您可以使用以下代码:
$(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:test@test.com" 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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>