悬停时激活 Popover 并单击任意位置关闭

Question

我正在使用 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:[e-mail]" 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>

Answer 1

要呈现链接，请使用html: true并显示/隐藏弹出窗口，您可以使用以下代码：$(document).ready(function() {&nbsp; $('[data-toggle="popover"]').popover({&nbsp; &nbsp; placement: 'top',&nbsp; &nbsp; html: true&nbsp; });&nbsp; $('[data-toggle="popover"]').on("mouseenter", function() {&nbsp; &nbsp; $(this).popover('show');&nbsp; });&nbsp;&nbsp;&nbsp; $('body').on('click', function(e) {&nbsp; &nbsp; $('[data-toggle=popover]').each(function() {&nbsp; &nbsp; &nbsp; if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).popover('hide');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});html, body{ height: 100%; }<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /><a href="mailto:[e-mail]" 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>

Answer 2

请在弹出窗口中添加html: true，以便它可以呈现 HTML。$(document).ready(function(){&nbsp; &nbsp; $('[data-toggle="popover"]').popover({&nbsp; &nbsp; &nbsp; &nbsp; placement : 'top',&nbsp; &nbsp; &nbsp; &nbsp; trigger : 'hover',&nbsp; &nbsp; &nbsp; &nbsp; html: true&nbsp; &nbsp; });});$('body').on('click', function (e) {&nbsp; &nbsp; //only buttons&nbsp; &nbsp; if ($(e.target).data('toggle') !== 'popover'&nbsp; &nbsp; &nbsp; &nbsp; && $(e.target).parents('.popover.in').length === 0) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('[data-toggle="popover"]').popover('hide');&nbsp; &nbsp; }&nbsp; &nbsp; //buttons and icons within buttons&nbsp; &nbsp; /*&nbsp; &nbsp; if ($(e.target).data('toggle') !== 'popover'&nbsp; &nbsp; &nbsp; &nbsp; && $(e.target).parents('[data-toggle="popover"]').length === 0&nbsp; &nbsp; &nbsp; &nbsp; && $(e.target).parents('.popover.in').length === 0) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('[data-toggle="popover"]').popover('hide');&nbsp; &nbsp; }&nbsp; &nbsp; */});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><a href="mailto:[e-mail]" 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>