如何关闭jQuery工具提示

我一直在尝试使用jQuery制作非常简单的javascript工具提示，但我遇到了一堵砖墙。 想法是在div内部使用很少的内联元素（ span ）。 span元素将包含一个带有一点html（图像和链接）的工具提示div 。 单击span元素时应打开工具提示，单击其外部或工具提示外部时应关闭工具提示。

到目前为止，打开工具提示不是问题，而是关闭。

      #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; }    $(function () { // generate boxes and tooltips for (var i = 0; i < 9; i++) { $('#colors').append('
add to favorites
'); } $('#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]); } }); }); })    
   

如果点击位于span和工具提示之外，我似乎无法找到关闭工具提示的方法。

Answer 1

像这样的东西应该工作正常:)

  $(document).mouseup(function (e) { var container = $("YOUR CONTAINER SELECTOR"); if (container.has(e.target).length === 0) { container.hide(); } }); 

Answer 2

要关闭工具提示，您需要致电

 $('.tooltip').remove(); 

在你的场景中尝试

 $.each($('.tooltip'), function (index, element) { $(this).remove(); }); 

Answer 3

我为自己的网站调查了这个问题，没有找到合适的解决方案，所以我自己编写了。 我的用例与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 = ' 
Close
'; closerLink = ' 
Tap link again to open it.
Close
'; } // 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); } 

我在这里针对三种类型的东西：

• 具有title属性的锚标签（ a ）。
• 带有title属性的图像标签（ img ）。
• 具有类工具提示的任何元素。
• 并特别排除任何类noToolTip元素。

我在这里写了这个： JQuery UI工具提示，带有移动的关闭链接

Answer 4

生成工具提示时，将结果保存到变量。 您可以在关闭所有工具提示后使用它。

 var tooltips = $(document).tooltip({ // all kind of initilization options like position, open, hide, etc. }); // ... app logic ... tooltips.tooltip('close') // will close all tooltips 

从这里得到的信息： https ： //jqueryui.com/tooltip/#forms

Answer 5

  $(document).mouseup(function (kamesh) { var container = $("YOUR CONTAINER SELECTOR"); if (container.has(kamesh.target).length === 0) { container.hide(); } });