estilo convertirlo a funcion

chalchis · #1 (**permalink**) 05/03/2008, 14:09

hola amigos encontre este tooltip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Bubble Tooltips</title>
<meta content="CSS Tooltips">

<style type="text/css">
body{font: .75em Arial,sans-serif; background: #FFFFFF; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
</style>
</head>

<body>
<div id="container">
<h1>CSS Bubble Tooltips</h1>
<p>Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can
<a href="#" class="tt">hover over me<span class="tooltip"><span class="top"></span>

<span class="middle">This is my Bubble Tooltip with CSS</span><span class="bottom"></span></span></a> to see how well these bubble tooltips work. Besides that if you have an advanced site in the first place you probably have enought javascript already.</p>
<p>This example will show you how well this tooltip stretches for long descriptions when you <a href="#" class="tt">hover here!<span class="tooltip"><span class="top"></span><span class="middle">WWOOWW!, <br />This really is a very long tooltip. Normally they aren't this long but every once in a while you feel the urge to use a really long description to make sure you get your point across to everyone! This could go on and on all of the way down the page and probably overflow onto the next website you visit! No, seriously go check the next website you planned on visiting..but you have to be quick when you move the mouse off of this link. I bet you can't do it fast enough ;)</span><span class="bottom"></span></span></a>. Also with the IE hack for the :hover state, you can do this with elements besides anchors.</p>
<p>If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.</p>
</div>
</body>
</html>

pero como podria hacerle para volverle funcion es decir sin quiero validar un input text

function validar()
{
alert("error");
//llame aqui el tool tip y que se posicione en donde se encuentre el elemento

}

sera posible??

saludos

espero sus comentarios

origen : http://trentrichardson.com/examples/csstooltips/

messer · #2 (**permalink**) 06/03/2008, 09:59

Lo que veo en este codigo es puro CSS nada de Javascript. Segun el mouse este sobre un link se mostrara o no el bubble que es una imagen Gif.

chalchis · #3 (**permalink**) 09/03/2008, 14:17

ah eso voy, quiero invocar el tooltip en vez de usar href
ya que no usa ningun evento. Lo que trato de saber es como modificar, para poder invocar el tooltip usando funciones de javascript

saludos

messer · #4 (**permalink**) 10/03/2008, 08:18

A ver si te entiendo bien, lo que quieres es usar el tooltip sin utilizar ningun vinculo? es decir aplicarlo por ejemplo a una imagen, textfield, boton, etc. con eventos onclick, onmouseover, etc.?

chalchis · #5 (**permalink**) 10/03/2008, 19:24

Cita:

Iniciado por messer

A ver si te entiendo bien, lo que quieres es usar el tooltip sin utilizar ningun vinculo? es decir aplicarlo por ejemplo a una imagen, textfield, boton, etc. con eventos onclick, onmouseover, etc.?

lo que trato de decir por ejmplo
tengo este input

<input type="text" name="nombre">

y cuando trate de hacer un submit con la funcion que valiado los campos vacios ai es donde debe estrar el llamdo de tooltip

functiob validar()
{
if(document.form.nombre.value=="")
{
//aqui llame al tooltip y que se ponga sobre el campo nombre o aun lado
}
}

sera posible??

saludos
y gracias por tratar de ayudarme

messer · #6 (**permalink**) 11/03/2008, 08:06

Si es posible, te recomiendo que uses className

Ej:

Código:

document.form.nombre.className='showBubble'

o tambien puedes hacerlo con Style modificando la propiedad 'display'..

Ej:

Código:

document.getElementById('bubble').style.display=''

Intenta con eso y comentas.. Saludos!!

chalchis · #7 (**permalink**) 11/03/2008, 23:23

Cita:

Iniciado por messer

Si es posible, te recomiendo que uses className

Ej:

Código:

document.form.nombre.className='showBubble'

o tambien puedes hacerlo con Style modificando la propiedad 'display'..

Ej:

Código:

document.getElementById('bubble').style.display=''

Intenta con eso y comentas.. Saludos!!

pero como seria la funcion o no edito nada del style original
disculpame si la respuesta es tonta pero no entiendo muy bien

saludos

y gracias

messer · #8 (**permalink**) 12/03/2008, 08:35

Muy bien Chalchis vamos a ponerte un ejemplo, espero que lo puedas adaptar a lo que necesitas y a tu gusto.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Bubble Tooltips</title>
<meta content="CSS Tooltips">
<script type="text/javascript">
function bubbleIt(x){
var s=document.getElementById(x);
s.className="tm";
}
function unBubbleIt(x){
var s=document.getElementById(x);
s.className="ts";
}
</script>
<style type="text/css">
body{font: .75em Arial,sans-serif; background: #FFFFFF; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
.ts{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
.ts span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
.tm{ z-index:25; color: #aaaaff; background:;}
.tm span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:160px;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
.tm span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
.tm span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(bubble_filler.gif) repeat bottom; 
}
.tm span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}
</style>
</head>

<body>
<div id="caja" class="ts"><input type="text" name="caja" value="" onfocus="bubbleIt('caja')" onblur="unBubbleIt('caja')" /><span class="tooltip"><span class="top"></span><span class="middle">Tooltip de la caja 1!</span><span class="bottom"></span></span></div>
<div id="box" class="ts"><input type="text" name="box" value="" onfocus="bubbleIt('box')" onblur="unBubbleIt('box')" /><span class="tooltip"><span class="top"></span><span class="middle">Tooltip de la caja 2!</span><span class="bottom"></span></span></div>
<div id="area" class="ts"><input type="text" name="area" value="" onfocus="bubbleIt('area')" onblur="unBubbleIt('area')" /><span class="tooltip"><span class="top"></span><span class="middle">Tooltip de la caja 3!</span><span class="bottom"></span></span></div>
</body>
</html>

Es el mismo codigo, unicamente se elimina del CSS la referencia al vinculo'a' y se coloca como un estilo general.

El Javascript unicamente intercambiaria los estilos .ts y .tm lo demas es puro CSS.

Saludos!!

chalchis · #9 (**permalink**) 12/03/2008, 22:27

orale muchas gracias esta de super
ahora debo averiguar la manera que el tooltip
de posicione arribba del campo que lo requiera
ua que en el ejmplo que agradesco solo aparece en la misma posicion

algo asi:

saludos
y gracias me pondre a investigar

messer · #10 (**permalink**) 13/03/2008, 07:12

Bueno, a la funcion de mostrar "bubbleIt()" le puedes agregar otros parametros para que juegues con la ubicacion que necesitas y asi posiciones el tooltip a tu gusto, por ejemplo:

Código:

bubbleIt(x,60,120)

En donde 'x' seria el ID de la capa que quieres que se muestre, 60 se tomaria para top y 120 para left.

Código:

function bubbleIt(x,t,l){
var s=document.getElementById(x);
s.className="tm";
s.firstChild.nextSibling.style.top=t+'px';
s.firstChild.nextSibling.style.left=l+'px';
}

Aca esta la solucion..

Una vez mas un saludo!!

chalchis · #11 (**permalink**) 17/03/2008, 15:31

Cita:

Iniciado por messer

Bueno, a la funcion de mostrar "bubbleIt()" le puedes agregar otros parametros para que juegues con la ubicacion que necesitas y asi posiciones el tooltip a tu gusto, por ejemplo:

Código:

bubbleIt(x,60,120)

En donde 'x' seria el ID de la capa que quieres que se muestre, 60 se tomaria para top y 120 para left.

Código:

function bubbleIt(x,t,l){
var s=document.getElementById(x);
s.className="tm";
s.firstChild.nextSibling.style.top=t+'px';
s.firstChild.nextSibling.style.left=l+'px';
}

Aca esta la solucion..

Una vez mas un saludo!!

muchas gracias messer por la ayuda
saludos y gracias