jQuery 툴팁을 닫는 방법

jQuery로 아주 간단한 javascript 툴팁을 만들려고 노력했지만 벽돌 벽을 맞았습니다. 작은 인라인 요소 (span)를 div 안에 넣는 것이 좋습니다. 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

뭔가 일을해야 시도 시나리오에서

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

를 호출 할 필요가 툴팁을 닫으려면 내가이 문제를 조사 :

$(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

이 같은

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

출처

2012-08-07 07:46:26

잘 내 자신의 사이트와 적절한 솔루션을 찾지 못했습니다, 그래서 내 자신을 썼습니다. 내 유스 케이스는 OP와는 조금 다르지만 다른 사용자가 같은 용어를 검색하는 데 도움이 될 수 있습니다. 은 모바일 플랫폼에만 나타나는 가까운 링크가 필요했습니다. 바탕 화면에서는 대상 요소에서 mouseout을 가져올 때 도구 설명이 닫히지 만 터치 플랫폼에서는 달라 붙어 있기 때문에 유용합니다. title 속성

앵커 태그 (a) : 여기 물건의 세 가지 유형을 목표로하고

// 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 속성을 가진 이미지 태그 (img).
클래스가 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

답변에 좀 더 정보를 추가 해보세요. –

답변

관련 문제