Twitter Bootstrap 弹出框/工具提示错误与移动设备？

Posted 2023-03-31

【中文标题】Twitter Bootstrap 弹出框/工具提示错误与移动设备？

【英文标题】：Twitter Bootstrap Popover/Tooltip Bug with Mobile?

【发布时间】：2012-05-07 14:01:58

【问题描述】：

我正在使用 Twitter Bootstrap，但在 iPad 和 iPhone 上进行测试时遇到了一些我无法修复的问题。在移动设备（至少是那些设备）上，您需要单击以启用提示或弹出窗口（如预期的那样）。问题是一旦你关闭它就永远无法关闭。如果您再次单击它，我添加了一个侦听器以将其关闭，但我很难相信默认行为不会是单击以将其删除。这是 Bootstrap 弹出框和工具提示中的错误吗？我的代码在下面 - 它似乎可以工作，但只有当您单击创建提示或弹出框的同一项目时 - 页面上的任何位置都没有（无法使其工作）。

触发代码：

$(function () 
    //Remove the title bar (adjust the template)
    $(".Example").popover( 
        offset: 10,
        animate: false,
        html: true,
        placement: 'top',
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
        //<h3 class="popover-title"></h3>
        //Need to have this click check since the tooltip will not close on mobile
        ).click(function(e) 
            jQuery(document).one("click", function() 
                $('.Example').popover('hide')
        );   
    );
);

HTML：

<a href="javascript:void(0);" class="Example" rel="popover" data-content="This is the Data Content" data-original-title="This is the title (hidden in this example)">

提前致谢！

丹尼斯

【问题讨论】：

这里有同样的问题，第一次点击它会阻止点击去按钮。所以我必须单击两次才能使按钮正常工作。

我在 GitHub 上也发布了这个错误 - 还没有回复。我想知道推特是否知道这件事？他们必须！也许还没有太多人在手机上玩这个……？ github.com/twitter/bootstrap/issues/3417

你做得很好，我不知道该怎么做，除了根本不使用弹出框和工具提示 :(。我希望我们至少可以为触摸设备禁用它们。

【参考方案1】：

我尝试了 数十种 发布到 *** 和网络其他各个角落的解决方案，以下是唯一对我有用的解决方案！

说明

如here 所述，您可以对元素使用 CSS 指令，以使其可触摸设备点击。我不能告诉你为什么会这样或者那里发生了什么，但似乎就是这样。所以，我想让整个文档又名body 在移动设备上可点击，这将允许我触摸任何地方来关闭弹出框。

弹窗 JS

$(function () 
  $('[data-toggle="popover"]').popover( trigger: "hover")
);

方向

1。安装 Modernizr

我使用的是rails，所以我使用了gem。

gem 'modernizr-rails'

2。使用 css 指令创建 touch 类

将以下内容添加到您的 CSS：

.touch 
  cursor: pointer

3。仅在触摸设备上，将 touch 类添加到 body

如果您希望其他元素可点击，而不是整个 body，请将 touch 类添加到它们。

if (Modernizr.touch) 
  $( "body" ).addClass( "touch" );

就是这样！现在，您可以在桌面上正常使用您的弹出框（即使带有悬停触发器），并且可以在移动设备上触摸关闭。

【讨论】：

非常感谢朋友！它真的很有效！在 ios 设备上完美运行

我刚刚注意到，我的 Firefox 也被modernizr 检测为触摸设备。因此在整个页面上都有触摸图标

我已经为触控设备设计了很长时间......而且在一百万年之后都不会猜到！大吃一惊。谢谢！

【参考方案2】：

我的 iPad 也有同样的问题。但在浏览器中它工作正常。我的解决方案是为我可以隐藏工具提示的所有可能元素添加侦听器：

$('*').bind('touchend', function(e)
   if ($(e.target).attr('rel') !== 'tooltip' && ($('div.tooltip.in').length > 0))
     $('[rel=tooltip]').mouseleave();
     e.stopPropagation();
    else 
     $(e.target).mouseenter();
   
);

是的，为所有工具提示发送事件的开销很小，但您无法定义显示哪个元素工具提示。

【讨论】：

修复了 iOS 设备上的问题，但影响了 android 设备上的相同功能！

【参考方案3】：

主要概念是在移动设备上手动制作弹出框

$(document).ready(function() 
    if ('ontouchstart' in window) 
        $('[data-toggle="popover"]').popover(
            'trigger': 'manual'
        );            
    
);

【参考方案4】：

请参考以下代码 sn-p 以使其正常工作：

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

$('body').on('click', function (e) 
  $('[data-toggle="popover"]').each(function () 
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) 
      $(this).popover('hide');
    
  );
);

这是检测主体点击并关闭页面上所有工具提示的最简单方法。

您可以查看实时示例here

【讨论】：

知道为什么在您的小提琴中，在打开最后一个弹出窗口后，如果您尝试单击下方 *（就在弹出框 div 下方）将其关闭，弹出框不会关闭？ - 使用您的代码后，这个问题发生在我身上

【参考方案5】：

解决这个jsfiddle， 在 iOS（iPad 和 iPhone）、Android 和 Windows 上进行测试。

$(document).ready(function()

    var toolOptions;
    var toolOptions2;
    var isOS = /iPad|iPhone|iPod/.test(navigator.platform);
    var isAndroid = /(android)/i.test(navigator.userAgent);

    ///////////////////////////////////////// if OS
    if (isOS)

        toolOptions = 
            animation: false,
            placement:"bottom",
            container:"body"
        ;
        $('.customtooltip').tooltip(toolOptions);

        $('.customtooltip').css( 'cursor', 'pointer' );
         $('body').on("touchstart", function(e)
            $(".customtooltip").each(function () 
                // hide any open tooltips when the anywhere else in the body is clicked
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.tooltip').has(e.target).length === 0) 
                    $(this).tooltip('hide');
                ////end if
            );
        );

    ///////////////////////////////////////// if Android
     else if(isAndroid)
        toolOptions = 
            animation: false,
            placement:"bottom",
            container:"body"
        ;
        toolOptions2 = 
            animation: false,
            placement:"left",
            container:"body"
        ;
        $('.c_tool1').tooltip(toolOptions);
        $('.c_tool2').tooltip(toolOptions);
        $('.c_tool3').tooltip(toolOptions2);

    ///////////////////////////////////////// if another system
     else 
        toolOptions = 
            animation: true,
            placement:"bottom",
            container:"body"
        ;
        $('.customtooltip').tooltip(toolOptions);

    //end if system

    document.getElementById("demo").innerHTML = "Sys: "+navigator.platform+" - isOS: "+isOS+" - isAndroid: "+isAndroid;

);

<h6>
    first <a href="#!" title="" class="customtooltip c_tool1" data-original-title="data del toolltip numero 1">tooltip</a> 
    Second <a href="#!" title="" class="customtooltip c_tool2" data-original-title="data del toolltip numero 2">tooltip</a> 
    third <a href="#!" title="" class="customtooltip c_tool3" data-original-title="data del toolltip numero 3">tooltip</a>
</h6>

<p id="demo"></p>

【讨论】：

在 iOS 中，当打开工具提示然后通过单击外部某处将其关闭时，再次打开已关闭工具提示的唯一方法是打开另一个工具提示，然后第一个工具提示将能够打开

【参考方案6】：

引导工具提示 v3.3.7

实际：悬停工具提示不适用于我们项目中的触摸设备

解决方案：订阅tooltip的show事件并调用mouseenter

$body = $('body');

$body.tooltip(selector: '.js-tooltip');

// fix for touch device.
if (Modernizr.touch)  // to detect you can use https://modernizr.com
  var hideTooltip = function(e) 
    tooltipClicked = !!$(e.target).closest('.tooltip').length;
    if (tooltipClicked)  return; 

    $('.js-tooltip').tooltip('hide');
  
  var emulateClickOnTooltip = function(e) 
    tooltipsVisible = !!$('.tooltip.in').length;
    if (tooltipsVisible)  return; 

    $(e.target).mouseenter();
  
  var onTooltipShow = function(e) 
    tooltipClicked = !!$(e.target).closest('.tooltip').length;
    if (tooltipClicked)  return; 

    $body.on('touchend', hideTooltip); 
  
  var onTooltipHide = function() 
    $body.off('touchend', hideTooltip);
  

  $body
    .on('touchend', '.js-tooltip', emulateClickOnTooltip)
    .on('show.bs.tooltip', onTooltipShow)
    .on('hide.bs.tooltip', onTooltipHide);