tus camisetas frikis en camisetafriki.com

Archive

Posts Tagged ‘javascript’

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

March 19th, 2009 2 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: , ,

Tooltip en menús desplegables tipo select,combo y dropdown

March 18th, 2009 2 comments

Buenas, siguiendo estos días unos posts dedicados al infernal Internet Explorer y cómo algunas empresas, no sólo se empeñan en jorobar empleandolo, sino además manteniendo la versión 6 como “corporativa”, hoy vamos a aprender como implementar un tooltip para menús desplegables tipo select (html) o dropdown(asp.net)

Para IE7 y navegadores que funcionan bien como Firefox, podemos hacer uso del atributo title de los elementos html ya que se dispara el tooltip en el evento mouseover automáticamente (cosa que en IE6 no ocurre por eso hay que hacerlo de otra manera).

Si tenemos un desplegable que se llena dinámicamente, no podemos poner el title a cada option, ya que aun no existen a la hora de diseñar el formulario, por esto se puede echar mano de javascript con la siguiente funcion:

1
2
3
4
5
6
7
8
9
10
function tooltips(){			
        items = document.getElementsByTagName("option");
	for(i=0; i<items.length; i++)
	{
	       items[i].title=items[i].text;				
	}
	drop = document.getElementById("select");
	drop.onchange = tooltipselect;
	tooltipselect();
};

llamando a esta funcion en el body así:

1
<body onload="javascript:tooltips()";>

Con esto añadiremos el title a todos los dropdowns de la página así al desplegar el select, nos aparecerá un tooltip para cada option.

Para añadir también un tooltip a la opción seleccionada se incluye la siguiente función, que como se ve, es llamada al final de la anterior (asumiendo que el select tiene como id=”select”):

1
2
3
4
5
function tooltipselect()
{
	drop = document.getElementById("select");
	drop.title = drop.options[drop.selectedIndex].text;
};

Esto hace que al cambiar la opción, se actualice el tooltip del desplegable cerrado.

Ver una demo

Categories: Programacion Tags: , ,