tengo alguna duda con un código simple para un tooltip. Bien, este código me plantea un par de dudas. El caso es que creo el tooltiip para una "imagen" (en realidad es el área reservada de una imágen, esto es, se dispararía con el evento mouseover sobre una capa que esta por encima de la imagen, por lo que no puedo poner el texto agregado a la etiqueta title de la propia imagen), y saco las coordenadas con el método de la librería yui getXY, que funciona prácticamente igual que las propiedades clientX, clientY del objeto event, pero en este caso devolvienfo un array con los dos valores.
Duda 1) Si estas coordenadas se las paso a una función para el posicionamiento del tooltip bajo el evento mouseover, no deberían ser fijas? quiero decir, al final el tooltip se me acaba moviendo junto con el raton por todo el area de la imagen cuando lo que yo querría sería que se quede estático recibiendo solo las coordenadas de la primera vez que entra en el area. Parece que el mouseover se dispara cada vez que muevo el ratón por la imagen, comportandose como un mousemove. Hay alguna forma de solucionar esto? o mejor, como puedo hacer para que mi código se comporte como un auténtico tooltip?
Duda2) Al comportarse de forma tan "extraña" (seguramente es como tenga que hacerlo), el evento mouseout se me vuelve loco, disparándose a cada paso
Os pongo el código, que como veis tira de las librerías de yui (por conveniencia con el resto del sitio), pero en realidad solo utiliza un par de utilidades suyas.
Código PHP:
<html>
<head>
<script type="text/javascript" src="./yui_2.6.0/yui/build/utilities/utilities.js"></script>
<script type="text/javascript">
/****** simple tooltip utility, mainly used in details pages ************/
/****** but also can be used anywhere else on the site that may require it *******/
var tooltip = document.createElement("div");
tooltip.id = "tooltip";
tooltip.style.position = "absolute";
tooltip.style.visibility = "hidden";
tooltip.className = "tooltip";
tooltip.hide = function(){
var seeTooltip=new YAHOO.util.Anim('tooltip', {opacity:{to:0}},0.5);
seeTooltip.animate();
setTimeout("tooltip.style.visibility = 'hidden';", 7000);
}
tooltip.show = function(text, x, y){
if(!tooltip) document.createElement("div");
tooltip.innerHTML = text;
tooltip.style.left = x + "px";
tooltip.style.top = y +"px";
var seeTooltip=new YAHOO.util.Anim('tooltip', {opacity:{to:1}},0.5);
tooltip.style.visibility = "visible";
if (tooltip.parentNode != document.body)
document.body.appendChild(tooltip);
seeTooltip.animate();
// setTimeout("tooltip.hide()", 1000);
}
tooltip.setCoords = function(e){
var tltipCoords = YAHOO.util.Event.getXY(e);
tooltip.show('sample image', tltipCoords[0], tltipCoords[1]);
}
YAHOO.util.Event.on('sample_image', 'mouseover', tooltip.setCoords);
YAHOO.util.Event.on('sample_image', 'mouseout', tooltip.hide);
</script>
<style type="text/css">
.tooltip{
left: -4px; top: -4px;
background-color: #ccc;
border: solid black 1px;
padding: 5px;
font: bold 10pt sans-serif;
}
</style>
</head>
<body >
<div id="samp"><img id="sample_image" src="/images/sampleImage.jpg"></div>
</body>
</html>
Un saludo y gracias
