I'm using standard facebook style tooltips for jquery. My .js file contains the following:
$(function(){
$('[rel=tipsy]').tipsy({ fade: true, gravity: 'n' });
});
$(document).on('mousedown touchstart', function(e){
if ($('#header .dropdown:visible').length) {
var container = $('#header .dropdown:visible');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('#header .dropdown:visible').stop().slideUp('fast').parent().removeClass('active');
}
}
});
$(document).on('mouseup touchend', function(e){
if ($('.tipsy:visible').length) {
var container = $('[rel=tipsy]');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('[rel=tipsy]').each(function(){
$(this).tipsy('hide');
});
}
}
});
All works fine with mouse clicks. On tablets and smartphones I have a problem with repeated clicks on the element with rel=tipsy. First click on the element shows me a pop-up hint as it should be. Then second click anywhere hides this pop-up hint. When I try again to click on the same element, nothing happens. And this is the problem.
I have one more element on the page with rel=tipsy. After clicking on it and then hiding it my next click on the first element with rel=tipsy works again but again only for the first click on it.
Tell me, please, where is a mistake?