如何关闭jQuery工具提示

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

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

<!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>

我似乎无法找到一个方法来关闭该提示，如果点击是span和工具提示之外。

来源

2012-08-07 Kristian

像这样的东西应该工作的工具提示罚款:)

$(document).mouseup(function (e) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
});

来源

2012-08-07 07:58:30 pkurek

要关闭你需要调用

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

在你的情况下尝试

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

来源

2012-08-07 07:46:26

我研究过此问题的我自己的网站，并没有找到任何合适的解决方案，所以我写了我自己的。我的使用案例与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); 
}

我瞄准三类这里的东西：一个title属性

锚标签（a）。
图像标签（img）具有title属性。
任何带有类toolTip的元素。
并且具体地不包括任何类别为noToolTip的元素。

我这里写了这件事：JQuery UI tooltip with a close link for mobile

来源

2015-06-18 13:44:25

-3

$(document).mouseup(function (kamesh) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (container.has(kamesh.target).length === 0) 
    { 
     container.hide(); 
    } 
});

来源

2016-06-09 09:31:15 kamesh

请尽量多一点信息添加到您的回答。 – 2016-06-09 10:19:03

如何关闭jQuery工具提示

回答

相关问题