Как скрыть всплывающую подсказку на смартфонах с сенсорным экраном?

Я новичок в JavaScript. Я воспользовался поиском, чтобы найти решение своей проблемы, но не смог найти то, что искал.

Я использую это jquery.balloon. js, который преобразует браузерный рендеринг всплывающей подсказки по умолчанию в индивидуальный (с добавлением к нему некоторого CSS — фона, границы и т. д.).

Это код JavaScript:

$(document).ready(function(){
 $('a').balloon({ 
  position: "bottom",
  tipSize: "0"
 });
});

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

Проблема возникает при просмотре на устройствах с сенсорным экраном.

Нет мыши для наведения, поэтому один раз тапаю по ссылке и всплывает всплывающая подсказка (ссылка не активируется, ссылка активируется только при двойном тапе), но потом всплывающая подсказка не скрывается. Тапаю куда-то по телу, но всплывающая подсказка остается на экране.

Я знаю, как скрыть элементы в JavaScript, нажав/нажав за их пределами (в html или body) с помощью $('html').click(function() { //code });, но здесь проблема в том, что всплывающая подсказка - это не элемент, а атрибут...

Как скрыть только всплывающую подсказку при нажатии где-нибудь в теле?

Вы можете протестировать это поведение на сайте jquery.balloon.js здесь с любым устройством с сенсорным экраном, чтобы увидеть, что после активации нажатием всплывающая подсказка не может скрыться.


javascript jquery responsive-design touchscreen balloon-tip
person Иван Иванов    schedule 23.03.2014    source источник
comment
Вместо того, чтобы редактировать решение в свой вопрос, добавьте ответ.   -  person Charles    schedule 24.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

Спасибо за единственный ответ, но я разобрался.

Я создал class со следующим кодом:

$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;

Таким образом, я создал класс .balloon, который позволил мне самостоятельно настроить всплывающую подсказку. Я использовал этот код, чтобы скрыть всплывающую подсказку, скрыв .balloon (который скрывает недавно настроенную всплывающую подсказку jQuery):

$(document).ready( function(){
    $('body').click( function(event){
        event.stopPropagation();
        $('.balloon').hide();
    });
});
person Иван Иванов    schedule 24.03.2014

arrow_upward
-1
arrow_downward

Вы можете вызвать функцию hideBalloon.

person Brian Anderson    schedule 23.03.2014