如何關閉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工具提示

回答

相關問題