关闭手动触发的 Bootstrap 4 Popper.js 工具提示

Question

我使用 jQuery 触发 Bootstrap 4 Popper.js 工具提示，如下所示：

$('.like-btn').on('click',function(){$(this).tooltip('show');});

工具提示应在几秒钟后消失。 以下解决方案不起作用：

// 1
$('.like-btn').on('click',function({$(this).tooltip('show').delay(2000).tooltip('hide');});
// 2
$('.like-btn').on('click',function(){$(this).tooltip({delay{show:0,hide:2000}});});
// 3
...; setTimeout($('.like-btn').tooltip('hide'), 2000);

Answer 1

您可以像这样在链接按钮上将触发器属性设置为“焦点”

$('.like-btn').popover({ trigger: 'focus' });

Answer 2

tooltip('show')返回调用它的 DOM 元素。 此外，您不应该直接调用tooltip('show') ，因为这样 tooltip 将表现得像常规工具提示，而不是您需要通知引导程序您要手动触发它

$(function () {

    $('.like-btn').tooltip({ trigger: 'manual'}); //inform bootstrap that we wish to handle programtically

    $('.like-btn').on('click',function(){
        $(this).tooltip('show');//show

        setTimeout(()=>{
            $(this).tooltip('hide'); // hides when timeouts
        }, 2000);

    }); 

});