Foros del Web » Programando para Internet » Javascript »

Mostrar aviso sólo si tooltip visible durante 5 seg

Estas en el tema de Mostrar aviso sólo si tooltip visible durante 5 seg en el foro de Javascript en Foros del Web. He creado un tooltip y lo que quiero hacer es que si dicho tooltip está visible durante 3 segundos, se muestre un mensaje tipo "Lleva ...
  #1 (permalink)  
Antiguo 01/05/2011, 06:41
 
Fecha de Ingreso: febrero-2008
Mensajes: 75
Antigüedad: 16 años, 10 meses
Puntos: 0
Mostrar aviso sólo si tooltip visible durante 5 seg

He creado un tooltip y lo que quiero hacer es que si dicho tooltip está visible durante 3 segundos, se muestre un mensaje tipo "Lleva viendo esto más de 3 segundos..."

¿Alguien me puede decir cómo lo puedo hacer? He visto que para el manejo de eventos de tiempo son muy escasos

style.css
Código:
a.tooltip{font:11px Geneva, Arial, Helvetica, sans-serif; color:#CC3E6E; text-decoration:none;}
a.tooltip:hover{border-bottom: 1px dotted #CC3E6E;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {display:none; margin:0 0 0 10px; padding:5px 5px; }
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #CC3E6E; background:#FFEFF5; color:#CC3E6E !important;}
codigo.js
Código:
var sms = "";

function replaceAll(txt, replace, with_this) {
  return txt.replace(new RegExp(replace, 'g'),with_this);
}

sms = "<p><a class=\"tooltip\" href=\"#\"> probando<span> probando Tooltip</span></a></p>";
document.body.innerHTML = replaceAll( document.body.innerHTML, "inicio", sms );
  #2 (permalink)  
Antiguo 01/05/2011, 06:54
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 6 meses
Puntos: 310
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

Cuando se muestre, creas un setTimeout de 3000ms, y entonces compruebas si sigue visible, si lo está, creas otro div y escribes ahí lo que necesites.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #3 (permalink)  
Antiguo 01/05/2011, 08:04
 
Fecha de Ingreso: febrero-2008
Mensajes: 75
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

Cita:
Iniciado por _cronos2 Ver Mensaje
Cuando se muestre, creas un setTimeout de 3000ms, y entonces compruebas si sigue visible, si lo está, creas otro div y escribes ahí lo que necesites.
Saludos (:
He creado las siguientes funciones:
Código:
function timeMsg(){
  var time = setTimeout(alertMsg(), 3000);
}

function alertMsg() {
  window.alert("Hello");
}
¿Dónde pongo onMouseOver="timeMsg()" en la variable "sms"?
  #4 (permalink)  
Antiguo 01/05/2011, 08:45
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 6 meses
Puntos: 310
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

En lo que sea el tooltip. En el setTimeout, quítale los paréntesis a alertMsg.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #5 (permalink)  
Antiguo 01/05/2011, 11:15
 
Fecha de Ingreso: febrero-2008
Mensajes: 75
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

He conseguido que aparezca un mensaje cuando el ratón pasa por una palabra y otro mensaje cuando sale:

Código:
sms = "<a onMouseOver=\"window.alert('Dentro')\" onMouseOut=\"window.alert('Fuera')\" class=\"tooltip\" href=\"#\">" + "Barrio Sesamo" + "<span>" + "Tooltip" + "</span></a>"
Lo que no consigo entender es qué tengo que hacer para que onMouseOver pueda llamar a un método mío (timeMsg):

Código:
function timeMsg()  {
  window.alert("Dentro");
}
He probado las siguientes variantes puesto que no conseguía:
Código:
onMouseOver=\"timeMsg(void)\"
onMouseOver=\"timeMsg()\"
onMouseOver=\"timeMsg\"
onMouseOver='timeMsg(void)'
onMouseOver='timeMsg()'
onMouseOver='timeMsg'
  #6 (permalink)  
Antiguo 01/05/2011, 12:02
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 6 meses
Puntos: 310
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

En teoría la 2ª y la 5ª opción deberían funcionar.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #7 (permalink)  
Antiguo 01/05/2011, 12:07
 
Fecha de Ingreso: febrero-2008
Mensajes: 75
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

Gracias cronos2, cuando consiga solucionarlo lo posteo ;)
  #8 (permalink)  
Antiguo 05/05/2011, 01:21
 
Fecha de Ingreso: febrero-2008
Mensajes: 75
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: Mostrar aviso sólo si tooltip visible durante 5 seg

Ya he encontrado el problema :)

La cuestión está en que como hago modificaciones en el cliente, éste no encuentra mi función en su código por lo que no hace nada. La solución ha consistido en añadir mi función al html del cliente.

Aunque esta solución funciona, ¿no hay alguna forma para decirle que las funciones las ejecute desde el plugin y no desde la web?

Etiquetas: durante, tooltip, visible, avisos
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 07:06.