jQuery tooltip onClick?

Question

he estado buscando desde hace mucho tiempo y ahora parece que no puede encontrar un plugin jQuery información sobre herramientas que utiliza la siguiente:

onClick (En lugar de hover, haciendo que funcione como un botón de activación)
fundido de entrada/Fade Out

La idea para usar la información sobre herramientas es que tengo algunos enlaces en los que quiero mostrar el contenido. Aunque la información general (probablemente sea donde me equivoqué ...) es para suspender, debe ser uno que se alteró haciendo clic en el enlace que lo activaba.

¿Hay mejores ideas para esto que usar una información sobre herramientas?

Answer 1

No sé cómo has estado buscando, pero una rápida búsqueda en Google de información sobre herramientas jQuery me dio http://flowplayer.org/tools/tooltip/index.html (estado utilizando su plug-in desplazable desde hace algún tiempo, realmente me gusta :)

de su sitio :

jQuery Tooltip le permite controlar completamente cuándo se mostrará u ocultará la información sobre herramientas en . Puede especificar diferentes eventos para diferentes tipos de elementos. Puede controlar este comportamiento con los eventos variable de configuración que ha siguientes valores por defecto:

events: { 
    def:  "mouseenter,mouseleave", // default show/hide events for an element 
    input: "focus,blur",    // for all input elements 
    widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button 
    tooltip: "mouseenter,mouseleave"  // the tooltip element 
} 

usando un 'clic' debe hacer el truco. (No he probado que) sin embargo

, si todo lo demás falla todavía se puede fingir mediante el uso de la 'API de scripting', simplemente llame .show() y .hide()

Editar:

Como hacer clic, el clic no funciona exactamente como pensé, le ofrezco una solución. Realmente espero que haya una forma más agradable de lograr el mismo resultado. Lo probé con una copia local de http://flowplayer.org/tools/tooltip/index.html y funciona como se esperaba.

var tooltip = $("#dyna img[title]").tooltip({ 
    events: { 
     def:  ",", // default show/hide events for an element 
     tooltip: "click,mouseleave"  // the tooltip element 
    }, 
    // tweak the position 
    offset: [10, 2], 
    // use the "slide" effect 
    effect: 'slide' 
// add dynamic plugin with optional configuration for bottom edge 
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 

tooltip.click(function() { 
    var tip = $(this).data("tooltip"); 
    if (tip.isShown(true)) 
     tip.hide(); 
    else 
     tip.show(); 
}); 

Pero yo sugiero que eche un vistazo a QTIP según lo sugerido por user834754 así, quizás te guste más.

Answer 2

u puede intentar el uso QTIP, u puede unirse cualquier caso jQuery en él:

show: { when: { event: 'click' } } 

Un plugin simple y bastante :) http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 3

si lo prefiere un simple información sobre herramientas, ligera, se puede considerar http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ y luego simplemente vincula el evento jquery onclick.

Answer 4

Es posible abrir una información sobre herramientas de jQuery UI (jQuery UI versión 1.10.2) en un evento de clic. Agregar título atributo a un elemento que no sea el elemento en el que se debe mostrar la información sobre herramientas.

<span id="helpbutton" title="This is tooltip text">Help</span> <!-- tootltip would be displayed on click on this --> 
<input id="inputbox"></input> <!-- help to be displayed for this element --> 

inicializar la información de herramienta en el elemento que tiene atributo de título con la posición establecida en el elemento de destino.

$("#helpbutton").tooltip({position: {of: "#inputbox", at: "right"}}); 

llamada abierta en la descripción de la función de devolución de llamada de la clic evento en el elemento de destino.

$("helpbutton").click(function() { 
    $("#helpbutton").tooltip("open"); 
}); 

Fuente: Floating help box with jQuery UI tooltip

Answer 5

También puede hacer:

$("#myTooltip").tooltip().off("mouseover").on("click", function() { 
    if ($(this).attr("visible") === "1") { 
    $(this).attr("visible", "0"); 
    return $(this).tooltip("close"); 
    } else { 
    $(this).attr("visible", "1"); 
    return $(this).tooltip("open"); 
    } 
}).on("mouseleave", function(event) { 
    return event.stopImmediatePropagation(); 
});