encontre por la web un tooltip que funciona muy bien, aunque quisiera adaptarle que me permita posicionarme dentro del globo del tooltip sin que se cierre, la funcion se lanza con bind al pasar encima del span, obviamente al quitarlo se desaparece, solo quisiera poder pasar del span al globo sin que se cierre hasta que quite el mouse del globo o del span.
Espero haberme dado a entender, aca el code:
Código Javascript:
Ver original
//tooltip $('[rel=properties]').bind('mouseover', function(){ if ($(this).hasClass('ajax')) { var ajax = $(this).attr('ajax'); $.get(ajax, function(theMessage){ $('<div class="properties">' + theMessage + '</div>').appendTo('body').fadeIn('fast');}); } else{ var theMessage = $(this).attr('content'); $('<div class="properties">' + theMessage + '</div>').appendTo('body').fadeIn('fast'); } $(this).bind('mousemove', function(e){ $('div.properties').css({ 'top': e.pageY - 50, 'left': e.pageX + 15 }); }); }).bind('mouseout', function(){ $('div.properties').fadeOut('fast', function(){ $(this).remove(); }); });
la clase properties:
Código CSS:
Ver original
.properties{ position:absolute!important; margin:10px; background:#eeeeee; padding:10px; border:2px solid #ccc; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); opacity:.9; -moz-opacity:.9; color:#000; font-size:12px; clear:both; }
y el span:
Código HTML:
Ver original
Bueno no sabria que agregar/quitar o cambiar en el jquery, o incluso tal ves en el css no lo se , espero me puedan apoyar una vez mas
gracias