Colaboraciones en el Guille

Tooltip para un DropDownList

Mostrar el Texto largo de un control DropDownList

 

Fecha: 26/Oct/2005 (24-10-05)
Autor: Marckys

 


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.

Problema DropDownList

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:

 

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.

Código Tooltip 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.

Resultado Tooltip dropDownList

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

 Gracias.


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


ir al índice principal del Guille