jquery 使用 twitter-bootstrap 工具提示删除焦点问题答案

【问题标题】：jquery remove focus issue with twitter-bootstrap tooltipjquery 使用 twitter-bootstrap 工具提示删除焦点问题
【发布时间】：2021-10-26 17:50:55
【问题描述】：

我有一个带有 bootstrap 3 的测试页面，当用户将鼠标悬停在图标上时，使用 tooltip 向用户显示一条消息。

点击图标会显示modal，当模态框关闭时，工具提示仍然显示给用户，因为焦点仍然应用于图标。

删除显示的提示的唯一方法是当用户物理单击表单上的某处以从图标中删除焦点。

我注意到在tooltip examples page 上出现了工具提示的显示问题。

我曾尝试在用户点击图标时使用 jquery 来移除焦点，但这种方法并没有达到预期效果。

这是我的html代码：

<a href="" id="id_page_help" data-target="#myModal" data-toggle="modal" rel="tooltip" class="no_decoration" title="Help">
    <i class="icon-bulb icon_size18"></i>
</a>

这是我的 jquery 代码：

<script>
    $('#id_page_help').click(function () {
        $('#id_page_help').blur();
        //alert('xxxx'); //alert does display - code triggered.
    });
</script>

我希望有人能指出我做错了什么或提供一种方法来消除焦点。

【问题讨论】：

标签： jquery html twitter-bootstrap focus tooltip

【解决方案1】：

只需使用焦点事件而不是点击事件......这应该会有所帮助 $('#id_page_help').on('focus', function () { $(this).blur() })

【讨论】：

Chetan，这将适用于所有链接——不仅仅是我测试页面中的模式链接。
这有特定的 id 对吗？它仅适用于您指定的链接。无论如何，您都在改进选择器以匹配您的上下文。还是我错过了什么？
使用此代码的一个大问题是带有工具提示的输入元素将变得不可点击，因为当我们单击（聚焦）它时，此代码会变得模糊。在初始化tooltip之前使用$.fn.tooltip.Constructor.Default.trigger = 'hover';来解决这个问题

【解决方案2】：

我知道这个问题被问到已经有一段时间了，但是对于任何有同样问题的人，这也可以通过覆盖工具提示的默认“触发器”来完成：

$.fn.tooltip.Constructor.Default.trigger = 'hover';   // Set the default trigger to hover

这将仅在悬停在目标元素上时显示所有工具提示，而不是默认行为，即在悬停时触发工具提示并专注于目标元素。

【讨论】：

【解决方案3】：

实际上这确实是 twitter bootstrap 中的一个问题。

在您的情况下，您必须使用 modal-box events 和 jQuery 的 blur 来处理 :focus 的 button。

这是我用过的jQuery：

 /*  #tooltip is id for button
     #myModal is id for modal-box */
 $('#tooltip').tooltip();

 $('#myModal').on('show.bs.modal', function () {
    $('#tooltip').blur(); /* To hide the tooltip on modal-box show */
 });

 $('#myModal').on('hidden.bs.modal', function (e) {
       console.log(e);
       $('#tooltip').tooltip('blur'); /* To hide the tooltip on modal-box close*/
 });

我还创建了一个JSFiddle。

请看一下，它会为您解决问题。

【讨论】：

vivekkupadhyay，谢谢 - 这很有帮助，但 chetan 的回答将适用于所有链接，而不仅仅是模态链接。
因为它没有在您的 que 中指定，并且您担心模态框，这就是为什么，无论如何，无论您的船是否漂浮 :)

【解决方案4】：

尝试将脚本放入$(document).ready(function() {....});

$(document).ready(function() {

    $(document).tooltip({ show: false, hide: false }).click( function () {
          $(this).tooltip("close");
    }); // your tooltip script 

    $('div').on("click", "#id_page_help", function() {
        $(this).blur();
       //alert('xxxx'); //alert does display - code triggered.
        return;
    });

});

【讨论】：

【解决方案5】：

$('[data-toggle="tooltip"]').tooltip();

试试下面的代码，而不是上面的代码

$('[data-toggle="tooltip"]').hover(function(){$(this).tooltip('show')});

【讨论】：