javascript 如何关闭 jQuery 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11840885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to close jQuery tooltip
提问by Kristian
I've been trying to make very simple javascript tooltip with jQuery but I've hit a brick wall. The idea is to have little inline element (span) inside a div. The spanelement will contain a tooltip divwith a little html (image and link). Tooltip should be opened when clicked on the spanelement and closed when clicked outside of it or outside of the tooltip.
我一直在尝试使用 jQuery 制作非常简单的 javascript 工具提示，但我遇到了麻烦。这个想法是span在div. 该span元素将包含一个div带有一点 html（图像和链接）的工具提示。单击span元素时应打开工具提示，并在单击元素外部或工具提示外部时关闭。
So far, opening the tooltip is not a problem but closing is.
到目前为止，打开工具提示不是问题，但关闭是。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
#colors > div {
background-color: red;
height: 50px;
width: 50px;
margin: 5px;
}
#colors > div > span {
min-height: 10px !important;
min-width: 10px !important;
border: 3px solid black;
position: relative;
}
.tooltip {
border: 2px solid blue;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function () {
// generate boxes and tooltips
for (var i = 0; i < 9; i++) {
$('#colors').append('<div id="' + i + '"><span><div class="tooltip"><a href="#">add to favorites</a></div></span></div>');
}
$('#colors').delegate('span', 'click', function (event) {
$(this).children('.tooltip').css({position:'absolute', top:'5px', left:'5px'}).fadeIn();
// bottom one won't work
//event.stopPropagation();
});
$(document).delegate('body', 'click', function (event) {
var that = this
$.each($('.tooltip'), function (index, element) {
// it's always visible ...
//if ($(element).is(':visible')) {
// doesn't work either
if ($(element).is(':visible') && $(element).has(event.target).length === 0) {
var s = event.target;
console.log([($(s) == event.target), event.target, index, element, $(element).has(event.target).length, that]);
}
});
});
})
</script>
</head>
<body>
<div id="colors"></div>
</body>
</html>
I can't seem to find a way to close the tooltip if click is outside of the spanand tooltip.
如果单击位于span和 工具提示之外，我似乎无法找到关闭工具提示的方法。
采纳答案by pkurek
Something like this should work fine :)
像这样的东西应该可以正常工作:)
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
回答by Declan McNulty
To close a tooltip you need to call
要关闭工具提示，您需要调用
$('.tooltip').remove();
In your scenario try
在你的场景中尝试
$.each($('.tooltip'), function (index, element) {
$(this).remove();
});
回答by Robert Mark Bram
I investigated this issue for my own site and didn't find any suitable solution, so I wrote my own. My use case is a bit different to the OPs, but might help other people searching for the same term. I needed a close link that only appears on mobile platforms. This is useful because on a desktop, the tool tip will close when you mouseoutfrom the target element, but on a touch platform it sticks around.
我为我自己的网站调查了这个问题，但没有找到任何合适的解决方案，所以我自己写了一个。我的用例与 OP 有点不同，但可能会帮助其他人搜索相同的术语。我需要一个仅出现在移动平台上的关闭链接。这很有用，因为在桌面上，当您mouseout离开目标元素时，工具提示将关闭，但在触摸平台上，它会一直存在。
// Set up tool tips for images and anchors.
$( document ).tooltip({
items: "a[title], img[alt], .toolTip[title], :not(.noToolTip)",
track: true,
position: { my: "left+15 center", at: "right center" },
content: function() {
var element = $( this );
var closer = closerLink = '';
if (isMobile()) {
closer = ' <br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>';
closerLink = ' <br>Tap link again to open it.<br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>';
}
// noToolTip means NO TOOL TIP.
if ( element.is( ".noToolTip" ) ) {
return null;
}
// Anchor - use title.
if ( element.is( "a[title]" ) ) {
return element.attr( "title" ) + closerLink;
}
// Image - use alt.
if ( element.is( "img[alt]" ) ) {
return element.attr( "alt" ) + closer;
}
// Any element with toolTip class - use title.
if ( element.is( ".toolTip[title]" ) ) {
return element.attr( "title" ) + closer;
}
}
});
function isMobile() {
return (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent);
}
I am targeting three types of things here:
我在这里针对三种类型的事情：
- Anchor tags (
a) with atitleattribute. - Image tags (
img) with atitleattribute. - Any element with class
toolTip. - And specifically excludeany element with class
noToolTip.
a带有title属性的锚标记 ( ) 。img带有title属性的图像标签 ( ) 。- 任何具有 class 的元素
toolTip。 - 并明确排除任何具有 class 的元素
noToolTip。
I wrote this up here: JQuery UI tooltip with a close link for mobile
回答by ungalcrys
When you generate the tooltips, save the result to a variable. You can use it after to close all the tooltips.
生成工具提示时，将结果保存到变量中。您可以在关闭所有工具提示后使用它。
var tooltips = $(document).tooltip({
// all kind of initilization options like position, open, hide, etc.
});
// ... app logic ...
tooltips.tooltip('close') // will close all tooltips
had the info from here: https://jqueryui.com/tooltip/#forms
从这里获得信息：https: //jqueryui.com/tooltip/#forms
回答by kamesh
$(document).mouseup(function (kamesh)
{
var container = $("YOUR CONTAINER SELECTOR");
if (container.has(kamesh.target).length === 0)
{
container.hide();
}
});
