wie man jQuery tooltip schließt

Ich habe versucht, sehr einfach Javascript Tooltip mit jQuery zu machen, aber ich habe eine Mauer getroffen. Die Idee ist, ein kleines Inline-Element (span) in einem div zu haben. Das span Element enthält einen Tooltip div mit ein wenig HTML (Bild und Link). Tooltip sollte geöffnet werden, wenn auf das Element span geklickt und geschlossen wird, wenn außerhalb oder außerhalb des Tooltips geklickt wird.wie man jQuery tooltip schließt

Bis jetzt ist das Öffnen des Tooltips kein Problem, aber Schließen ist.

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

Ich kann nicht den Tooltip erscheinen, einen Weg zu finden, um zu schließen, wenn Klick außerhalb des span und Tooltip ist.

Quelle

2012-08-07 Kristian

So etwas sollte funktionieren :)

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

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

Quelle

2012-08-07 07:58:30 pkurek

Um einen Tooltip zu schließen Sie müssen

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

In Ihrem Szenario nennen versuchen

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

Quelle

2012-08-07 07:46:26

ich dieses Problem untersucht für meine eigene Seite und fand keine passende Lösung, also schrieb ich meine eigene. Mein Anwendungsfall unterscheidet sich ein wenig von den OPs, könnte aber anderen Personen helfen, die nach dem gleichen Begriff suchen. Ich brauchte einen engen Link, der erscheint nur auf mobilen Plattformen. Dies ist nützlich, weil auf einem Desktop die QuickInfo geschlossen wird, wenn Sie vom Zielelement mouseout, aber auf einer Touch-Plattform bleibt es herum.

// 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); 
}

ich drei Arten von Dingen, hier bin Targeting:

Anchor-Tags (a) mit einem title Attribute.
Bild-Tags (img) mit einem title Attribut.
Jedes Element mit Klasse toolTip.
Und speziell auszuschließen jedes Element mit Klasse noToolTip.

Ich schrieb dies hier oben: JQuery UI tooltip with a close link for mobile

Quelle

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(); 
    } 
});

Quelle

2016-06-09 09:31:15 kamesh

Bitte versuchen Sie es ein wenig mehr Informationen, um Ihre Antworten hinzuzufügen. –

wie man jQuery tooltip schließt

Antwort

Verwandte Themen