手机上的Twitter Bootstrap Popover / Tooltip Bug？

时间：2012-05-07 14:01:59

标签： mobile tooltip twitter-bootstrap popover

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

要解雇的代码：

$(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)">

提前致谢！

丹尼斯

6 个答案:

答案 0 :(得分：8)

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

解释

如上所述here，您可以使用CSS指令元素，以使其可以触摸设备点击。我不能告诉你为什么那样有用或者那里发生了什么，但事实似乎就是这样。所以，我想让整个文件body可以在移动设备上点击，这样我就可以触摸任何地方来解除弹出窗口。

Popover JS 

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

路线

1。安装Modernizr

我正在使用rails，因此我使用了gem。

gem 'modernizr-rails'

2。使用css-directive

创建一个touch类

将以下内容添加到CSS中：

.touch {
  cursor: pointer
}

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

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

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

就是这样！现在，您可以在桌面上正常使用弹出框（即使使用悬停触发器）也可以在移动设备上触摸它。

答案 1 :(得分：4)

我的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();
   }
});

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

答案 2 :(得分：1)

请参阅以下代码段以使其正常工作：

$('[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

答案 3 :(得分：1)

主要概念是在移动设备上手动设置弹出窗口 

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

答案 4 :(得分：1)

Bootstap-tooltip v3.3.7

实际悬停时的工具提示不能与我们项目中的 touch 设备配合使用

解决方案：订阅工具提示 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);
}

答案 5 :(得分：0)

此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>
相关问题
最新问题