tooltip pero para varios botones

chalchis · #1 (**permalink**) 10/08/2010, 00:29

hola amigos encontre este tooltip que me gusto
solo que en jquery no tengo mucho concimiento cuando se trata
de crear cosas dinamicas y aplicarle un evento o funciones

este es el tooltip
http://vadikom.com/tools/poshy-tip-j...lish-tooltips/

este el codigo para usar el tootltip para un solo boton

Código:

<body>
<button id="button-mio">mioShow</button>
</body>

estes es el jquery

Código:

$('#button-mio').poshytip({
				className: 'tip-twitter',
				content: 'Esta seguro de borrar el art&iacute;culo?<br><div align="center"><input type="button" name="button" id="button1" value="Si" /><button id="button-hide-mio" onclick="cerrar()">No</button></div>',
				showOn: 'none',			
				alignTo: 'target',				
				alignX: 'center',
				alignY: 'bottom',				
				//alignX: 'inner-left',
				offsetX: 0,
				offsetY: 5
			});


$('#button-mio').click(function() { $('#button-mio').poshytip('show'); });


function cerrar()
			{
			 	$('#button-mio').poshytip('hide');
			}

funciona bien pero mi duda es que tengo un listado
como le podria aplicar para distintos botones si el ejemplo solo funciona
para un boton que tenga el id:button-mio

saludos
espero sus comentarios amigos

gracias

mayid · #2 (**permalink**) 10/08/2010, 06:54

Probaste cambiar $('#button-mio') por $('.botones') ?

chalchis · #3 (**permalink**) 10/08/2010, 08:35

sorry se me olvido agregar otra linea del ejemplo

Código:

$('#button-mio').click(function() { $('#button-mio').poshytip('show'); });

ah ok, por lo que veo me dices que el selector debe ser por un class llamado .botones???
y como seria para el evento .click

seria asi???

Código:

$('.botones').click(function() { $('.botones').poshytip('show'); });

espero tus comentarios

gracias

mayid · #4 (**permalink**) 10/08/2010, 10:18

Lo mismo. Salvo que dentro del click ya podes usar $(this) para identificar elementos.

Cita:

$('.botones').click(function() {

$(this).poshytip('show');

});

chalchis · #5 (**permalink**) 10/08/2010, 10:48

muchas gracias ya quedo perfecto

chalchis · #6 (**permalink**) 10/08/2010, 11:02

una duda como podria ocultarlo si dentro de las opciones puse el boton de ocultar

ejem

Código:

$('.botones').poshytip({
				className: 'tip-darkgray',				
				content: '¿Quieres borrarlo?<br><input type="button" value="si" class="botones" /><input type="button" value="no" />',
				showOn: 'none',
				alignTo: 'target',
				alignX: 'inner-left',
				offsetX: 0,
				offsetY: 5
			});

			$('.botones').click(function() {
				$(this).poshytip('show');
			});

en la parte donde dice

Código:

content: '¿Quieres borrarlo?<br><input type="button" value="si" class="botones" /><input type="button" value="no" class="botones" />',

que tendria que poner ya que es otro boton el que va cerrar el tootlip
ya no podria usar esto me imagino

Código:

$('.botones').poshytip('hide');

saludos
espero tus comentarios

chalchis · #7 (**permalink**) 10/08/2010, 15:04

lo he solucionado de la siguiente manera con funciones de javascript

Código:

function tipball(valor)
		{
			//alert($('#'+valor).css("display"));
				//$('#'+valor).poshytip('hide');	
				$('.botones').poshytip('hide');
				$('#'+valor).poshytip({
					className: 'tip-darkgray',				
					content: '¿Quieres borrarlo?<br><input type="button" value="si" class="botones" /><input type="button" value="no"  onclick="cancelar(\''+valor+'\')" />',
					showOn: 'none',
					alignTo: 'target',
					alignX: 'inner-left',
					offsetX: 0,
					offsetY: 5
				});			 		
				$('#'+valor).poshytip('show');
			
			
		}
		function cancelar(valor)
		{
			//alert("cerrando:"+valor);
			 $('#'+valor).poshytip('hide');
		}

y el body

Código:

<input id="boton_0" type="button" value="button" class="botones" />
<input  id="boton_1" type="button" value="button" class="botones" onclick="tipball(this.id)" />
<input  id="boton_2" type="button" value="button" class="botones" onclick="tipball(this.id)" />
<input  id="boton_3" type="button" value="button" class="botones" onclick="tipball(this.id)" />
<input  id="boton_4" type="button" value="button" class="botones" onclick="tipball(this.id)" />
<input  id="boton_5" type="button" value="button" class="botones" onclick="tipball(this.id)" />

y ya me funciona, que es lo que hace

1.-mostrar el tooltip por cada boton que oprima
2.- si se precionan otro boton se cierrar el alterior y muestra el nuevo tooltip del boton correspondiente