How to hide balloon tooltip on touch screen smartphones?

Question

I'm newbie to JavaScript. I used the search to find solution for my problem, but I couldn't find what I was looking for.

I am using this jquery.balloon.js , which transforms the default browser rendering of the tooltip to customized one (with adding some CSS to it – background, border, etc.).

This is the JavaScript code:

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

Everything works just fine: when I hover the mouse on a link with included title attribute, the tooltip shows up customized. When I hover out the mouse the tooltip hides.

The problem comes when browsing on touch screen devices.

There is no mouse for hovering, so I tap once on the link and the balloon tooltip shows up (the link does not activate, the link is activated only when I tap twice), but then the tooltip does not hide. I tap somewhere on the body, but the tooltip remains on the screen.

I know how to hide elements in JavaScript by clicking/tapping outside them (in the html or body ) with $('html').click(function() { //code }); , but here the problem is that the tooltip is not an element, but attribute...

How to hide only the tooltip with tapping somewhere in the body?

You can test this behavior on the jquery.balloon.js site here with any touch screen device to see that once activated by tapping the tooltip can't hide.

Answer 1

Thanks for the only answer, but I figured it out.

I have created a class with the following code:

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

This way I created .balloon class which allowed me to customize the tooltip by myself. I used this code to hide the tooltip by hiding the .balloon (which hides the newly customized jQuery tooltip):

$(document).ready( function(){
    $('body').click( function(event){
        event.stopPropagation();
        $('.balloon').hide();
    });
});

Answer 2

您可以调用hideBalloon函数。