Tooltip para un DropDownList

Los que estéis acostumbrados a utilizar los comboBox de Windows, al utilizar el DropDownList en ASP.Net os encontraréis con una desagradable sorpresa. Todo el contenido que sobrepase el tamaño del control, no se mostrará dejando la información oculta para el usuario.

Este control cuenta con una propiedad Tooltip que no funciona y Según la librería de MSDN el problema es :

La propiedad ToolTip se hereda de la clase WebControl y no se puede aplicar al control DropDownList. Esta implementación de la propiedad ToolTip no permite establecer un valor y devuelve String.Empty si se utiliza el descriptor de acceso get.

Bueno, como no podemos utilizar la propiedad de Microsoft nos crearemos un Tooltip nosotros mismos, que no necesite lanzar ningún evento de servidor para consultar la selección.

Comenzaremos por el JavaScript.

		
<SCRIPT language="JavaScript">
<!--			
function MostrarTooltip ( idObject ) 
{ 			
	var obj = document.getElementById( idObject ); 
	document.getElementById("tooltip").innerHTML = obj.options[obj.selectedIndex].value;
	

	if(obj.options[obj.selectedIndex].value !="") 
	{
		//Formato Tooltip 
 		document.getElementById("tooltip").style.zIndex = 9999999; 
  		document.getElementById("tooltip").style.display = "inline"; 
  		document.getElementById("tooltip").style.position = "absolute"; 
 		document.getElementById("tooltip").style.border =  "ActiveBorder  1px	solid"  ; 
		document.getElementById("tooltip").style.padding =   "3px"; > 
		document.getElementById("tooltip").style.fontSize =  "10px"; 
		document.getElementById("tooltip").style.fontFamily = "Verdana"; 
		document.getElementById("tooltip").style.backgroundColor = "LemonChiffon"; 
		document.getElementById("tooltip").style.top =    
		document.getElementById(idObject).offsetTop + document.getElementById(idObject).offsetHeight + "px";   
		document.getElementById("tooltip").style.left =	5 + event.x;			    
	}      
} 
function OcultarTooltip ( )
{ 
  document.getElementById("tooltip").style.display = "none"; 
}

//-->
</SCRIPT>

Este Script cuenta con dos funciones muy simples:

• MostrarTooltip (IdDropDownList): Recupera el campo seleccionado del control DropDownList del que le pasamos su ID, y lo muestra en un DIV con el formato especificado.
• OcultarTooltip ( ) : Recupera el DIV y lo Oculta.
  

 

En la página ASPX.

1. Creamos el <DIV> con el identificador "ToolTip"  para mostrar la información que nos interesa..
2. Y por cada DropDownList que tengamos haremos otro <DIV> que se encargará de lanzar los eventos para mostrar y ocultar el ToolTip pasándole como argumento el ID del DropDownList.

 

Resultado Final.

Finalmente con este simple JavaScript Tendremos un ToolTip que nos mostrará todo el contenido de la selección del DropDownList sin tener que modificar el diseño de la página ASPX.

Si os ha sido útil este artículo votar por el.

 Gracias.

Fichero con el código de ejemplo: Marckys_DropDownList.zip - 4 KB