cómo cerrar jQuery tooltip

He estado tratando de hacer javascript tooltip muy simple con jQuery pero he golpeado una pared de ladrillo. La idea es tener un pequeño elemento en línea (span) dentro de un div. El elemento span contendrá una información sobre herramientas div con un pequeño html (imagen y enlace). La información sobre herramientas se debe abrir cuando se hace clic en el elemento span y se cierra cuando se hace clic fuera de ella o fuera de la información sobre herramientas.cómo cerrar jQuery tooltip

Hasta ahora, la apertura de la información sobre herramientas no es un problema, pero el cierre sí lo es.

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

Me parece que no puede encontrar una manera de cerrar la etiqueta de ayuda si es clic fuera de la span y descripción.

Fuente

2012-08-07 Kristian

Algo como esto debería funcionar bien :)

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

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

Fuente

2012-08-07 07:58:30 pkurek

Para cerrar una información sobre herramientas que necesita para llamar

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

En su escenario tratar

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

Fuente

2012-08-07 07:46:26

he investigado esta cuestión para mi propio sitio y no encontré ninguna solución adecuada, así que escribí la mía. Mi caso de uso es un poco diferente de los PO, pero podría ayudar a otras personas que buscan el mismo término. Necesitaba un enlace cercano que solo aparece en las plataformas móviles. Esto es útil porque en un escritorio, la punta de la herramienta se cerrará cuando mouseout del elemento de destino, pero en una plataforma táctil se queda.

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

me estoy apuntando tres tipos de cosas aquí:

etiquetas de anclaje (a) con un atributo title.
Etiquetas de imagen (img) con un atributo title.
Cualquier elemento con la clase toolTip.
Y específicamente excluye cualquier elemento con la clase noToolTip.

Escribí esta aquí: JQuery UI tooltip with a close link for mobile

Fuente

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

Fuente

2016-06-09 09:31:15 kamesh

favor, trate de añadir un poco más de información a sus respuestas. –

cómo cerrar jQuery tooltip

Respuesta

Cuestiones relacionadas