Вопрос по mobile, twitter-bootstrap – Twitter Bootstrap Popover / Ошибка всплывающей подсказки с мобильного?

15

Я работаю с 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)">

Заранее спасибо!

Деннис

Та же проблема здесь, при первом щелчке она не дает щелчку перейти к кнопке. Поэтому я должен нажать дважды, чтобы кнопка заработала. Matthieu Napoli
хорошо, что ты сделал, я не знаю, что делать, кроме как вообще не использовать всплывающие окна и всплывающие подсказки :(. Хотелось бы, чтобы мы хотя бы отключили их для сенсорных устройств. Matthieu Napoli
Я опубликовал это на GitHub как ошибку - пока нет ответа. Интересно, Twitter знает об этом? Они должны! Может быть, еще не так много людей играют с этим на мобильном ...?github.com/twitter/bootstrap/issues/3417 Dennis

Ваш Ответ

6   ответов
1

make popover manually on mobile device

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

v3.3.7

Actual: всплывающая подсказка не работает сtouch устройства в нашем проекте

Solution: Подписаться на всплывающую подсказку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);
}
8

dozens решений, размещенных в stackoverflow и других различных уголках сети, и ниже приводитсяonly тот, который работал для меня!

Explanation

Как указаноВотВы можете использовать CSS-директиву для элемента, чтобы сделать его доступным для сенсорного устройства. Я не могу сказать вам, почему это работает или что там происходит, но, похоже, это так. Итак, я хочу сделать весь документ акаbody кликабельна на мобильных устройствах, что позволит мне дотронуться до любого места, чтобы закрыть поповер.

Popover JS
$(function () {
  $('[data-toggle="popover"]').popover({ trigger: "hover"}})
});
Directions 1. Install Modernizr

Я использую рельсы, поэтому я использовалдрагоценный камень.

gem 'modernizr-rails'
2. Create a touch class with a css-directive

Добавьте следующее в ваш CSS:

.touch {
  cursor: pointer
}
3. On touch devices only, add the touch class to the body

Если вы хотите, чтобы другие элементы были кликабельными, а не весьbody, добавитьtouch класс им.

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

That's it! Теперь вы можете нормально использовать ваш поповер на рабочем столе (даже при наведении), и он будет запрещен касанием на мобильном телефоне.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
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');
    }
  });
});

Это самый простой способ обнаружения кликов по телу и закрытия всех всплывающих подсказок на странице.

Вы можете проверить живой примерВот

Error: User Rate Limit Exceeded
0

Решение по этомуjsfiddle, test on iOS (iPad and iPhone), Android and 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>
Error: User Rate Limit Exceeded
4

ально. Решением для меня было добавление слушателей для всех возможных элементов, которые я могу скрыть во всплывающей подсказке:

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

Да, небольшая нагрузка на отправку события для всех всплывающих подсказок, но вы не можете определить, какая подсказка элемента отображается.

Error: User Rate Limit Exceeded

Похожие вопросы