在模态关闭后,如何防止焦点关注Bootstrap模式的切换按钮？

Question

我有一个切换Bootstrap模式的按钮.按钮本身包含在div中,因此工具提示会在悬停时显示.

当我关闭模态时,按钮会聚焦,工具提示会显示而不会悬停元素.

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

 <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
             </div>

             <div class="modal-body">
                 <p>lorem ispum dolor sit amet</p>
             </div>


             <div class="modal-footer">
                 <button type="button" class="btn btn-primary">Submit</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
             </div>
         </div>
     </div>
</div>

看看到底发生了什么:http://jsfiddle.net/6t3kxhLb/

到目前为止我唯一能解决的办法是在hidden.bs.modal事件激活时模糊按钮.但我对结果并不满意.

这是我的解决方法:

$('#modal').on('hidden.bs.modal', function(event){
    setTimeout(function(){
      $('[data-toggle="modal"]').blur();
    });
 });

当模态关闭时,你们知道有什么方法可以防止对切换按钮的关注吗？

Answer 1

根据Bootstrap 文档，您需要指定触发工具提示的内容。选项为click、 、和hover，focus而manual默认值是同时具有hover和focus。所以只需添加data-trigger="hover"到您的元素：

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip" data-trigger="hover">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

小提琴示例： http: //jsfiddle.net/6t3kxhLb/1/