如何在触摸屏智能手机上隐藏气球工具提示？答案

【问题标题】：How to hide balloon tooltip on touch screen smartphones?如何在触摸屏智能手机上隐藏气球工具提示？
【发布时间】：2014-03-23 20:55:18
【问题描述】：

我是 JavaScript 新手。我使用搜索来找到我的问题的解决方案，但我找不到我正在寻找的东西。

我正在使用this jquery.balloon.js，它将工具提示的默认浏览器呈现转换为自定义的呈现（添加一些 CSS - 背景、边框等）。

这是 JavaScript 代码：

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

一切正常：当我将鼠标悬停在包含title 属性的链接上时，工具提示显示为自定义。当我将鼠标悬停时，工具提示会隐藏。

在触摸屏设备上浏览时会出现问题。

没有鼠标悬停，所以我在链接上点击一次，气球工具提示出现（链接没有激活，只有当我点击两次时链接才会激活），但是工具提示并没有隐藏。我点击了身体的某处，但工具提示仍保留在屏幕上。

我知道如何通过使用$('html').click(function() { //code }); 在 JavaScript 外部单击/点击它们（在 html 或 body 中）来隐藏元素，但这里的问题是工具提示不是元素，而是属性。 .

如何通过点击身体某处仅隐藏工具提示？

您可以使用任何触摸屏设备在 jquery.balloon.js 站点here 上测试此行为，以查看一旦通过点击工具提示激活就无法隐藏。

【问题讨论】：

【解决方案1】：

感谢唯一的答案，但我想通了。

我使用以下代码创建了class：

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

这样我创建了.balloon 类，它允许我自己自定义工具提示。我使用这段代码通过隐藏.balloon（隐藏了新定制的jQuery工具提示）来隐藏工具提示：

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

【讨论】：

【解决方案2】：

你可以调用 hideBalloon 函数。

【讨论】：