Foros del Web - Ver Mensaje Individual

emprear · #4 (**permalink**) 03/06/2013, 17:23

Cita:

Iniciado por Pentaxeros

Esa página ya la he visto, y los que me gustan dan incompatibilidad con mi página actual, y prefiero cocinar uno que haga solo lo que yo quiero.

Me ayudáis con el código?

Gracias

Bueno, tooltips con jquery y fade debe de haber visto muchos, que te traigan incompatibilidad, debe de haber de todo, ahora que para hacerlo más bonito recurrir a jQuery un poco exagerado, te dejo uno muy sencillito con css y js sin jQuery para el fade

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Tooltip + fade noJquery</title>
<style type="text/css">
/*<![CDATA[*/
/* Tooltip con css */
a.tooltip{
outline:none;
text-decoration:none;
}
a.tooltip span{
z-index:10;
display:none;
padding:10px 16px; 
margin-top:10px;
margin-left:28px;
width:140px;
line-height:16px;
font-size: 14px;
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #000; 
-webkit-box-shadow: 5px 5px 8px #000;
box-shadow: 5px 5px 8px #000;
opacity: 0;
}
a.tooltip:hover span{
display:inline;
position:absolute;
color:#111;
border:1px solid #404A5B;
background:#fffAF0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
// fade para el tooltip
var tiempo;
function micapa(lacapa){var fade=0,micapa=lacapa.style,ms=(micapa.opacity==0)?0:1;tiempo=setInterval(Fade,10);
function Fade(){if(fade<100){fade+=1;if(ms)micapa.filter="alpha(opacity="+fade+")";else micapa.opacity=(fade/100)}else clearInterval(tiempo)}};
function limpiarEfecto(s){clearInterval(tiempo);s.style.opacity=0;}
// fin fade
//]]>
</script>
</head>
<body>
<p>
<a href="#" class="tooltip" onmouseover="micapa(this.childNodes[1]);" onmouseout="limpiarEfecto(childNodes[1]);">
    El link uno<span>Tooltip para link uno</span>
    </a>
<br />
<a href="#" class="tooltip" onmouseover="micapa(this.childNodes[1]);" onmouseout="limpiarEfecto(childNodes[1]);">
    El link dos<span>Tooltip para link dos</span>
    </a>
</p>
</body>
</html>

Obviamente es adaptable a eso de "hacer solo lo que necesito"

Saludos