Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Duda sobre Tooltip en varios inputs

JQuery - Duda sobre Tooltip en varios inputs

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Alice in

Duda sobre Tooltip en varios inputs

Publicado por Alice in (6 intervenciones) el 29/08/2014 21:11:55
Hola tengo un problema con éste Tooltip. Tengo varios inputs, y se debe mostrar un mensaje cada vez que pase el puntero encima. Pero lo que pasa es que se están mostrando en todos, no en uno por uno.

Se debe mostrar y esconder por cada vez que pase el cursor sobre uno, no en todos al mismo tiempo.

He intentado hacer ciclos, y varias cosas, pero no funciona.

HTML

1
2
3
4
5
6
7
8
<div id="contenedor" class="cf">
            <input type="text" class="tooltip" id="tooltipNombre">
            <input type="text" class="tooltip">
            <input type="text" class="tooltip">
            <input type="text" class="tooltip">
            <input type="text" class="tooltip">
            <input type="text" class="tooltip">
</div>


JS

1
2
3
4
5
6
7
8
9
10
11
12
var message = 'soy Tolltip',
    position = 'left',
    inputs = $('input');
 
$('.tooltip').mouseover(function() {
    if (position === 'left') {
        $(this).parent().append($('<div>' + message + '</div>').addClass('mensaje'))
        $('.mensaje').fadeIn("fast")
    };
}).mouseout(function() {
    $('.mensaje').hide();
});


CSS

1
2
3
4
5
6
7
8
9
10
11
body,p,h1,h2,h3,h4,h5,h6,ul,ol{margin:0;padding:0}
ol,ul,ul {list-style:none}
.cf:after {clear:both;display:block;content:"";visibility:hidden;height:1%;line-height:0;}
#contenedor{background:green;width:900px;padding:20px 0;}

input{
   float:left;width:140px;height:20px;margin:4px;
   padding:5px 0;border:1px solid #d7d7d7;text-indent:10px;

}
.mensaje{width:120px;margin:5px;padding:10px;float:left;
color: #fff;border-radius:6px;text-align:center;background-color:#73E70D;  

}

El código es simple por el momento.
Muchas gracias por su experiencia y ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Duda sobre Tooltip en varios inputs

Publicado por xve (673 intervenciones) el 30/08/2014 09:36:19
Hola Alice, eso te sucede, porque cada vez que pasas el ratón por encima de algún input, añades un <div>

Prueba así, añadiendo únicamente una vez el div.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
	<script>
	$(document).ready(function(){
		var message = 'soy Tolltip',
			position = 'left',
			inputs = $('input');
 
		$("#contenedor").append($('<div>' + message + '</div>').addClass('mensaje'));
 
		$('.tooltip').mouseover(function() {
			if (position === 'left') {
				$('.mensaje').fadeIn("fast")
			};
		}).mouseout(function() {
			$('.mensaje').hide();
		});
	});
	</script>
 
	<style>
	body,p,h1,h2,h3,h4,h5,h6,ul,ol{margin:0;padding:0}
	ol,ul,ul {list-style:none}
	.cf:after {clear:both;display:block;content:"";visibility:hidden;height:1%;line-height:0;}
	#contenedor{background:green;width:900px;padding:20px 0;}

	input{
	float:left;width:140px;height:20px;margin:4px;
	padding:5px 0;border:1px solid #d7d7d7;text-indent:10px;

	}
	.mensaje{width:120px;margin:5px;padding:10px;float:left;
	color: #fff;border-radius:6px;text-align:center;background-color:#73E70D;  

	display:none;
	}
	</style>
</head>
 
<body>
<div id="contenedor" class="cf">
	<input type="text" class="tooltip" id="tooltipNombre">
	<input type="text" class="tooltip">
	<input type="text" class="tooltip">
	<input type="text" class="tooltip">
	<input type="text" class="tooltip">
	<input type="text" class="tooltip">
</div>
</body>
</html>

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar