jak zamknąć podpowiedź jQuery

Próbowałem zrobić bardzo prostą podpowiedź javascript z jQuery, ale uderzyłem w mur. Chodzi o to, aby mieć mały element liniowy (span) wewnątrz div. Element span będzie zawierał etykietę narzędzi div z małym html (obrazem i linkiem). Etykietka powinna zostać otwarta po kliknięciu na element span i zamknięta po kliknięciu poza nią lub poza etykietą narzędzia.jak zamknąć podpowiedź jQuery

Do tej pory otwieranie etykiety narzędzi nie stanowi problemu, ale zamknięcie jest.

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

I nie wydają się znaleźć sposób, aby zamknąć podpowiedź jeśli kliknięcie jest poza span i podpowiedzi.

Źródło

2012-08-07 Kristian

Coś jak to powinno działać dobrze :)

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

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

Źródło

2012-08-07 07:58:30 pkurek

Aby zamknąć podpowiedź trzeba zadzwonić

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

W swoim scenariuszu spróbować

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

Źródło

2012-08-07 07:46:26

badałem tę kwestię za moją własną stronę i nie znalazłem żadnego odpowiedniego rozwiązania, więc napisałem własną. Mój przypadek użycia różni się nieco od programów operacyjnych, ale może pomóc innym osobom szukającym tego samego terminu. Potrzebowałem bliskiego połączenia, które pojawia się tylko na platformach mobilnych. Jest to przydatne, ponieważ na pulpicie końcówka narzędzia zostanie zamknięta po oderwaniu elementu mouseout od elementu docelowego, ale na platformie dotykowej będzie się zaciskać.

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

jestem kierowania trzy rodzaje rzeczy tutaj:

tagów kotwy (a) z atrybutem title.
Tagi graficzne (img) z atrybutem title.
Dowolny element z klasą toolTip.
I w szczególności wykluczyć każdy element z klasą noToolTip.

Napisałem to tutaj: JQuery UI tooltip with a close link for mobile

Źródło

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

Źródło

2016-06-09 09:31:15 kamesh

Spróbuj dodać trochę więcej informacji na odpowiedzi. –

jak zamknąć podpowiedź jQuery

Odpowiedz

Powiązane problemy