twitter-bootstrap - 模式关闭后，如何防止焦点集中在 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 documentation ，您需要指定触发工具提示的内容。选项是 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>

fiddle 示例:http://jsfiddle.net/6t3kxhLb/1/