Estábamos usando los atributos 'título' para mostrar algo al pasar el mouse. Queremos que ahora se muestre con un clic. ¿Cómo puedo obtener una caja flotante que se parece a un título/información sobre herramientas, pero que puede mostrarse y ocultarse a pedido en lugar de estar vinculada a un vuelo estacionario?jquery tooltip, pero al hacer clic en lugar de colocar el cursor
Si usted se siente como handcoding, esto debe hacer el trabajo:
El html:
<div id="tooltip" style="display:none;">bla bla</div>
<div id="yourLink">Click here to show the tooltip!</div>
Y la JS:
$('#yourLink').click(function(){
$('#tooltip').toggle();
});
Sólo tiene que labrar correctamente la información sobre herramientas div
También hay buenos plugins de información sobre herramientas por ahí. iftrue mencionó uno, también hay this one
Es posible que desee para tratar de esta biblioteca:
http://craigsworks.com/projects/qtip/
Y a continuación, sólo tiene que llamar .qtip en un controlador de eventos .click.
$('#myInput').click(function(){/*insert qtip code here*/});
Nota: se puede agarrar el atributo de título dinámicamente a usar ese contenido en la información sobre herramientas qtip, si así lo desea.
Quisiera agregar a la respuesta de iftrue que puede tomar (y eliminar) el atributo de título en el evento del mouseenter y colocarlo nuevamente en el mouseleave. Esto para evitar que el navegador muestre el vuelo estacionario, pero sigue usando el atributo para almacenar el texto.
no pude hacer esto, qtip espera que la información sobre herramientas persista y quiere manejar el show/hide. Necesito poder mostrar/esconderme en el código. –
llamar a qtip al hacer clic no sirve de nada qtip está manejando el show hide en mouseover, no sé si podemos configurarlo no a – pahnin
lo siento, estaba equivocado – pahnin