当用户关注弹出内容时，引导弹出内容不应隐藏
Posted
技术标签:
【中文标题】当用户关注弹出内容时，引导弹出内容不应隐藏【英文标题】：bootstrap popover content should not hide when user focus on popover content 【发布时间】：2021-12-22 02:52:56 【问题描述】：我已经实现了在按钮悬停时显示弹出框。当用户关注内容时，弹出内容被隐藏。我已经实现了下面的代码。我不应该在用户关注内容时隐藏弹出内容，任何人都可以建议
$(function()
$('[data-toggle="popover"]').popover(
trigger: 'hover focus',
placement: 'bottom',
content: "And here's some amazing content. It's very engaging. Right?",
title: "Popover title",
html: true,
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
)
)
谢谢
【问题讨论】：
【参考方案1】：<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<a class="btn btn-sm btn-dark notice-pop" data-trigger="click" data-hideclickout="true" href="javascript:;">Test Button</a>
<script>
$('.notice-pop').popover(
content:"Some Popover Content",
);
$('body').on('click', function (e)
$('[data-hideclickout="true"][aria-describedby]').each(function ()
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
$(this).popover('hide');
);
);
</script>
</body>
</html>
还有许多其他配置可用。检查the documentation。
我在外部单击时要隐藏的元素上添加了一个自定义选项data-hideclickout="true。
【讨论】：
以上是关于当用户关注弹出内容时，引导弹出内容不应隐藏的主要内容，如果未能解决你的问题，请参考以下文章
如果删除了父元素，则隐藏 Bootstrap Popover