Tooltip en menús desplegables tipo select,combo y dropdown
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
Excelente, muchas Gracias, yo le modifique algunas cosas para que si los options tienen title, tome ese valor y sino tome el text y para que ademas funciones para todos los selects
function tooltipselect()
{
drop = document.getElementsByTagName(”select”);
drop.title = drop.title;
}
function tooltips(){
items = document.getElementsByTagName(”option”);
for(i=0; i<items.length; i++)
{
if (items[i].title){
items[i].title=items[i].title;
}else{
items[i].title=items[i].text;
}
}
drop = document.getElementsByTagName("select");
drop.onchange = tooltipselect;
tooltipselect();
}
Gracias.
Gracias por el aporte Jakeline