jquery 删除 Twitter 的焦点问题-bootstrap 工具提示

Question

我有一个带有 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>

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

Answer 1

尝试将脚本放入 $(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;
    });

});

Answer 2

实际上 twitter bootstrap.

确实是个问题

在你的情况下，你必须使用 模态框事件 和 jQuery 的 blur 为 button.

处理 :focus

这是我用过的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。

请看一下，这对你有用。

Answer 3

Just use focus event instead of click event... this should help

    $('#id_page_help').on('focus', function () {
        $(this).blur()
    })

Answer 4

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

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

这将仅在将鼠标悬停在目标元素上时显示所有工具提示，这与默认行为相反，默认行为是在悬停时触发工具提示并将焦点放在目标元素上。

Answer 5

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

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

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

jquery 删除 Twitter 的焦点问题-bootstrap 工具提示

jquery remove focus issue with twitter-bootstrap tooltip

html

jquery

focus

tooltip

twitter-bootstrap