come chiudere jQuery tooltip

Ho cercato di creare un tooltip javascript molto semplice con jQuery ma ho colpito un muro di mattoni. L'idea è di avere un piccolo elemento in linea (span) all'interno di uno div. L'elemento span conterrà un suggerimento div con un piccolo html (immagine e collegamento). La descrizione comando dovrebbe essere aperta quando si fa clic sull'elemento span e chiusa quando si fa clic al di fuori di essa o all'esterno del suggerimento.come chiudere jQuery tooltip

Finora, l'apertura del suggerimento non è un problema, ma la chiusura è.

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

io non riesco a trovare un modo per chiudere il suggerimento se click è al di fuori della span e tooltip.

fonte

2012-08-07 Kristian

Qualcosa del genere dovrebbe funzionare bene :)

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

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

fonte

2012-08-07 07:58:30 pkurek

Per chiudere un tooltip è necessario chiamare

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

nello scenario provare

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

fonte

2012-08-07 07:46:26

Ho studiato questo problema per il mio sito e non ho trovato nessuna soluzione adatta, quindi ho scritto il mio. Il mio caso d'uso è un po 'diverso dagli OP, ma potrebbe aiutare altre persone a cercare lo stesso termine. Avevo bisogno di un link stretto che venga visualizzato solo sulle piattaforme mobili. Questo è utile perché su un desktop, la punta dell'utensile si chiude quando si è mouseout dall'elemento di destinazione, ma su una piattaforma touch si attorciglia.

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

sto il targeting tre tipi di cose qui:

tag di ancoraggio (a) con un attributo title.
Tag immagine (img) con un attributo title.
Qualsiasi elemento con classe toolTip.
E in particolare esclude qualsiasi elemento con classe noToolTip.

ho scritto questo qui: JQuery UI tooltip with a close link for mobile

fonte

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

fonte

2016-06-09 09:31:15 kamesh

Prova per aggiungere un po 'più di informazioni per le vostre risposte. –

come chiudere jQuery tooltip

risposta

Problemi correlati