Закрытие всплывающей подсказки инструментов jQuery на iphone/ipad с сенсорным запуском

У меня запускается следующий код, если обнаружен iphone/ipad/ipod:

$('.tooltip-trigger').tooltip({offset: [20, -110],relative:true, events: { def: 'touchstart,blur'} });

У меня есть начальное касание, работающее вместо наведения, объявив def: 'touchstart', однако поля не закрываются, и вызов другого touchstart, например def: 'touchstart, touchstart', не работает. Как и def: 'toggle', что кажется мне логичным.

Любые идеи?


ipad jquery tooltip touchstart
person Friendly Code    schedule 11.06.2012    source источник

Ответы (6)


arrow_upward
3
arrow_downward

Я сделал то же самое. Вот как:

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Моя функция всплывающей подсказки выглядит так:

$(function() {
    $(document).tooltip({
        items: "[data-fn]",
          content: function() {
              var element = $( this );
              if ( element.is( "[data-fn]" ) ) {
              var s = element.attr('data-fn');
              var fn = /* some text content */

              if (isiPad) fn += "<div align=right'><a href='#' class='ipadTooltipHack'>close</a></div>";
              return fn;
              } 
          }     
       });
});

Наконец я добавил это:

$('.ipadTooltipHack').tooltip('close');

Кажется, работает.

Я попытался добавить опцию hide: в функцию всплывающей подсказки для автоматического скрытия через 10 секунд, которая сработала, но затем вы не могли снова открыть эту всплывающую подсказку, пока не была открыта другая.

person Bill Nobes    schedule 25.06.2013

arrow_upward
1
arrow_downward

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

person Friendly Code    schedule 19.06.2012

arrow_upward
1
arrow_downward

Я не смог воспроизвести решение Билла Нобса и nlsbshtr, нажатие на ссылку «закрыть» также привело к началу страницы. Я изменил его на более простое решение.

Это основано на jQuery и функции Modernizr.touch, чтобы определить, используем ли мы сенсорное устройство. Он использует стандартный тег title и закрывает открытую всплывающую подсказку, используя рекомендуемый метод закрытия при нажатии.

$(function() {
    $( '.tooltip-trigger' ).tooltip(
    {
        content: function() {
            var element = $( this );
            var s = element.attr('title');
            if ('' == s)
                return null;
            if (Modernizr.touch) // using Modernizr to detect touch devices.
                s += "&lt;div align=right'>&lt;a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close&lt;/a>&lt;/div>";
            return s;
        } 
    });
});

замените .tooltip-trigger классом по вашему выбору.

person leobard    schedule 05.11.2013

arrow_upward
0
arrow_downward

Ответ пользователя 2956826 следует рекомендации jqueryui здесь, а именно: -

Safari Mobile 7.0+ (и, вероятно, более ранние версии) страдает от ошибки, из-за которой события щелчка не запускаются для элементов, которые обычно не являются интерактивными.

...подробности здесь

Однако включенные специальные символы HTML, казалось, отображались буквально в браузере, и мне нужно было заменить их не-html-эквивалентами в двойных кавычках. Также (тривиально) отсутствует одинарная кавычка в той же строке вокруг align=right, поэтому у меня есть, например.

 s += "<div align='right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";
person Mat K. Witts    schedule 09.04.2015

arrow_upward
0
arrow_downward

Для меня это работает:

Добавьте CSS:

.ui-tooltip{cursor:pointer;}

Добавьте JQuery:

$('body').on('click','.ui-tooltip', function(){
   $(this).hide();
});

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

person user3759454    schedule 18.11.2017

arrow_upward
0
arrow_downward

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

var $tooltipCaller = $('.tooltip');

  $tooltipCaller.tooltip({
    open: function (e, ui) {
      $tooltipCaller.not(this).tooltip('close');
    }
  });
person lesgrosman    schedule 14.12.2017