时间戳

首页 > 解决方案 > 当用户关注弹出内容时，引导弹出内容不应隐藏

html - 当用户关注弹出内容时，引导弹出内容不应隐藏

问题描述

我已经实现了在按钮悬停时显示弹出框。当用户关注内容时，弹出内容被隐藏。我已经实现了下面的代码。我不应该在用户关注内容时隐藏弹出内容，任何人都可以建议

$(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>'
  })
})

谢谢

标签： htmljquerycssbootstrap-4

解决方案

<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>

还有许多其他配置可用。检查文档。

data-hideclickout="true我在外部单击时要隐藏的元素上添加了一个自定义选项。

推荐阅读