Tengo una página con muchos tooltips. Quiero mostrar / ocultar cada uno por separado al hacer clic en un botón. No me funciona, ¿alguien puede ayudarme?
function showMyTT(id) { $('#'+id).qtip({ content: { text: 'Show the content', title: false }, position: { my: 'left center', at: 'left center' }, show: { event: false, ready: true }, hide: false, style: { classes: 'ui-tooltip-shadow ui-tooltip-jtools' } }); } Gracias
Esta función showMyTT inicializa la información sobre herramientas. Después de ejecutar esta función para todos los identificadores (inicialización), debe hacer algo como esto:
HTML
JavaScript
function toggleQtip(id) { var div = $('#'+id); if (div.data('visible')) { div.qtip('hide'); div.data('visible', false); } else { div.qtip('show'); div.data('visible', true); } }
EDITAR
Así es como puede inicializar qtip (al menos una posibilidad). Agregue una clase personalizada a todos los divs que le gustaría tener una qtip, por ejemplo qtiped :
HTML
TEST
y luego ejecute el siguiente código:
JavaScript
$(document).ready(function() { $('.qtiped').each(function() { showMyTT( $(this).attr('id') ); }); });
Además, dentro de showMyTT realice el siguiente cambio: show: false para evitar la carga automática (queremos inicializar información sobre herramientas, no mostrarlas).