tus camisetas frikis en camisetafriki.com
Home > Programacion > Tooltip en css y javascript para menu desplegable que funciona en internet explorer 6

Tooltip en css y javascript para menu desplegable que funciona en internet explorer 6

March 19th, 2009 Leave a comment Go to comments

Antes de que sigas leyendo, no, no es posible hacer un tooltip en cada opción del desplegable en IE6 ya que ni el atributo title ni los eventos de ratón están disponibles para la etiqueta option. Para otros navegadores consulta mi post anterior.

Para hacer un tooltip funcional en IE6, se debe incluir el código siguiente:

1
2
3
4
5
6
7
8
9
10
11
<style>
#tooltip {
  position: absolute;
  display:none;
  padding:1px 2px 1px 2px;
  border: 1px solid black;
  background-color:#FFFF99;
  width:400px;
  z-index:1000;
}			
</style>

Esto crea la clase tooltip en CSS para asignar al div que almacenerá el texto del tooltip.

Ahora incluimos las funciones en javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="javascript" type="text/javascript">
// This function checks the mouse event
function checkEvent(e) {
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	showHideToolTip(targ, e, e.type)
}
// This function shows/hides the tooltip
function showHideToolTip (theDropDown, e, eType)
{
 var toolTipObj = new Object();
 toolTipObj = document.getElementById("tooltip");
 toolTipObj.innerHTML = theDropDown.options[theDropDown.selectedIndex].text;
 if(eType == "mouseout"){
  toolTipObj.style.display = "none";
   } else
 {
  toolTipObj.style.display = "inline";
  toolTipObj.style.top = e.y + 15;
  toolTipObj.style.left = e.x + 10;
 }
}

Esto sirve para comprobar el evento sobre el control y para mostrar u ocultar el tooltip.

Luego solo hay que añadir en el html el siguiente div

<div id="tooltip"></div>

Y añadir al select o dropdown que tengamos lo siguiente antes de cerrar el tag (>):

onMouseOver="checkEvent(this.event);" 
onMouseOut="checkEvent(this.event);" 
onMouseMove="checkEvent(this.event);"

Ver demo (solo IE7+)

Categories: Programacion Tags: , ,
  • http://profiles.yahoo.com/u/XD42U3LQTVZNJXPHAM2VRBHMG4 Luis Miguel

    Hola,

    justo andaba buscando esta funcionalidad y lo encontré en tu blog.

    Gracias.

  • http://profiles.yahoo.com/u/XD42U3LQTVZNJXPHAM2VRBHMG4 Luis Miguel

    Hola,

    justo andaba buscando esta funcionalidad y lo encontré en tu blog.

    Gracias.

%d bloggers like this: