Question

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

$('.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")
});

我尝试过点击，点按，触摸，触摸开启。什么都行不通。我只是不明白！

有趣的是，如果您使用触发器：“点击”，iPad上的行为会有所改善，如果您单击启动工具提示的elemenet，工具提示将关闭。但它是繁琐而不完美的。我希望用户能够实际点击弹出的工具提示来关闭它。甚至更好....点击任何地方关闭它。

Answer 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');
    });
});

Answer 2

虽然不理想，但我可以设置工具提示在设定的时间间隔之后关闭：

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

如何让iPad手动关闭Bootstrap Tooltip？

2 个答案: