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

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

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

Первоначальное касание работает, а не при наведении, объявляя def: «touchstart», однако поля не закрываются и вызывая другой сенсорный запуск, такой как def: «touchstart, touchstart»; не работает. Также не определено: «переключать» что кажется логичным для меня.

Есть идеи?

Ответы на вопрос(6)

Добавить CSS:

.ui-tooltip{cursor:pointer;}

Добавить jquery:

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

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

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

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

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

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 секунд, но затем вы не могли открыть эту подсказку, пока не откроется другая.

нажав «закрыть». Ссылка также перемещается в начало страницы. Я изменил это немного более простое решение.

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

$(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 с классом по вашему выбору.

Вот - который:-

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive

... подробноВот

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

 s += "<div align='right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";
Решение Вопроса

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

Ваш ответ на вопрос