Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/10/2012, 19:27
Avatar de catpaw
catpaw
 
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 14 años
Puntos: 23
adaptar a tooltip forma de cerrarlo

hola gente, saludos!!

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
  1. //tooltip
  2.         $('[rel=properties]').bind('mouseover', function(){
  3.             if ($(this).hasClass('ajax')) {
  4.                 var ajax = $(this).attr('ajax');   
  5.                 $.get(ajax,
  6.                 function(theMessage){
  7.                 $('<div class="properties">'  + theMessage + '</div>').appendTo('body').fadeIn('fast');});
  8.             }
  9.             else{
  10.                 var theMessage = $(this).attr('content');
  11.                 $('<div class="properties">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
  12.             }
  13.             $(this).bind('mousemove', function(e){
  14.                 $('div.properties').css({
  15.                     'top': e.pageY - 50,
  16.                     'left': e.pageX + 15
  17.                 });
  18.             });
  19.         }).bind('mouseout', function(){
  20.             $('div.properties').fadeOut('fast', function(){
  21.                 $(this).remove();
  22.             });
  23.         });

la clase properties:

Código CSS:
Ver original
  1. .properties{
  2.     position:absolute!important;
  3.     margin:10px;
  4.     background:#eeeeee;
  5.     padding:10px;
  6.     border:2px solid #ccc; 
  7.     border-radius: 10px;
  8.     -webkit-border-radius: 10px;
  9.     -moz-border-radius: 10px;
  10.     -khtml-border-radius: 10px;
  11.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  12.     opacity:.9;
  13.     -moz-opacity:.9;
  14.     color:#000;
  15.     font-size:12px;
  16.     clear:both;
  17.     }

y el span:

Código HTML:
Ver original
  1. <span rel="properties" content="<div>contenido del globo</div>">Nombre</span>

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