如何让 iPad 手动关闭 Bootstrap Tooltip？答案

【问题标题】：How can I get iPad's to close Bootstrap Tooltip manually?如何让 iPad 手动关闭 Bootstrap Tooltip？
【发布时间】：2014-07-10 12:27:52
【问题描述】：

我正在努力解决这个问题！使用引导工具提示，我无法获得关闭工具提示的跨浏览器/设备解决方案。

$('.tooltiplink').tooltip({ 
    container: 'body',
    trigger: 'hover focus',
    html: true,
    title: function() {
        divID = $(this).attr("id");
        divID = divID + "_div";
        return $("#" + divID).html();
    }
  });

您会注意到我使用悬停和焦点作为触发器。这非常适用于桌面浏览器和 chrome 手机。但工具提示不会在 iPad Chrome 或 Safari 上关闭。您所能做的就是单击另一个工具提示或将其保持打开状态，直到您离开页面。

为了自己解决问题，我尝试将事件绑定到工具提示本身的单击，但它不会拥有它！

$('.tooltip').bind("click tap", function(){
   $('.tooltip').css("display", "none")
});

我试过点击、点击、触摸、触摸启动。没有任何效果。我就是不明白！

有趣的是，如果您使用 trigger: 'click' 在 iPad 上的行为会有所改善，因为如果您单击启动工具提示的 elemenet，则工具提示会关闭。但它很繁琐，并不完美。我希望用户能够实际单击弹出的工具提示以将其关闭。甚至更好....单击它的任何位置以将其关闭。

【问题讨论】：

有人在此处提交了此问题的错误：github.com/twbs/bootstrap/issues/3417

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这似乎是一个常见的错误。它被提交在这里：https://github.com/twbs/bootstrap/issues/3417

一个可能的解决方案（来自该帖子的许多人）：

$(function () {
    $("tip").tooltip({
        placement: 'right'
        //Need to have this click check since the tooltip will not close on mobile
    }).click(function(e) {
        $(this).tooltip('toggle');
    });
});

【讨论】：

我尝试了上面的解决方案，但它不是跨设备/浏览器。这在 iPad 上（足够）修复了它，但现在 Chrome/Android 要求您首先关注一个元素（即链接），然后单击它以打开工具提示。所以对于普通用户来说，它看起来很糟糕！一旦您开始使用“点击”，它就会解决 iPad 问题，但会在其他设备上创建新问题。不敢相信！
我感受到了你的痛苦，我正在 phonegap 中开发一个大应用程序。在过去的几个月里，我一直在阅读大量的解决方法和文档，这简直是疯了……从一个障碍到下一个障碍！抱歉，我无法进一步帮助您解决这个问题。
这很烦人。我什至尝试了 setInterval 在几秒钟后隐藏元素作为测试，但没有奏效。总垃圾！

【解决方案2】：

虽然不理想，但我能够将工具提示设置为在设置的间隔后关闭，如下所示：

$('.tooltip').on('shown.bs.tooltip', function (e) {
    var trg = e.target
    setTimeout(function() {
        $(trg).tooltip('hide');
    }, 3000);
});

【讨论】：