Foros del Web » Programando para Internet » Jquery »

adaptar a tooltip forma de cerrarlo

Estas en el tema de adaptar a tooltip forma de cerrarlo en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/10/2012, 19:27
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 11 meses
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

Etiquetas: ajax, funcion, html, tooltip, adaptador, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:03.