bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

Posted 2020-06-18 小小沧海

前言

最近在使用bootstrap的popover插件，效果如下：

 

popover插件的focus模式时表现为当点击按钮时弹出浮动层，在点击浮动层外的任何一处，都隐藏浮动层。

但是在mac下的Safari浏览器中无法弹出浮动层，bug导致原因未知，官方demo也是如此。

解决方案

最后反复试验，发现一种解决方案，非常简单，即在给按钮绑定鼠标事件，然后手动触发dom的focus事件，也就连带触发了popover插件的显示事件。

var $btn=$(".btn");
$btn.mouseup(function(){
    $btn.focus();
})
$btn.popover({
    title: "",
    placement:"bottom",
    content: "xxxxxxxxxxxx",
    trigger:"focus",
    html:true,
});