Tooltip en un Select?

M@uR0 · #1 (**permalink**) 09/01/2007, 07:39

Necesito hacer algo de ese estilo, el tema es que tengo un select desplegable al que mediante Css le asigno un ancho fijo, dentro de cada <option> </option> despliego ciertos valores los cuales al ser tantos no alcanzo a ver el texto completo, por un tema de diseño no puedo ensancharlo mas, me gustaria saber de k manera podria ponerse algo asi como un tooltip que al posicionarme en alguna de las opciones mostrara la descripcion completa de la opcion.

Rafael · #2 (**permalink**) 09/01/2007, 22:32

Mmm, creo que un diseño debe estar supeditado a la función. No se de un Tooltip, pero creo que o acortas el texto o agrandas la caja.

Con JavaScript puedes tener cajas adicionales de descripción.

Por acá hay algo todavía por depurar:

Código PHP:

  <!-- Men&#250; "Drop Down" con descripción--> 
<script type="text/javascript" language="JavaScript1.1"> 
 
desc = new Array(6);  
    desc[0] = ""; 
    desc[1] = "Primera Descripción"; 
    desc[2] = "Segunda Descripción";        
    desc[3] = "Tercera Descripción"; 
    desc[4] = "Cuarta Descripción"; 
    desc[5] = "Quinta Descripción"; 
function describir() { 
    descripcion = document.Forma.Opcion.selectedIndex 
    document.Forma.AreaD.value = desc[descripcion]; 
    } 
function ir() { 
    document.location = document.Forma.Opcion.options[document.Forma.Opcion.selectedIndex].value 
    } 
// --></script> 
 
<form name="Forma"> 
 
<select name="Opcion" size="5" OnChange="describir()"> 
<option value="#">Seleccione una opci&#243;n: 
<option value="00-01-Subtema.htm">T&#237;tuloSubtema01a 
<option value="00-02-Subtema.htm">T&#237;tuloSubtema01b 
<option value="00-03-Subtema.htm">T&#237;tuloSubtema01c 
<option value="00-04-Subtema.htm">T&#237;tuloSubtema01d 
<option value="00-05-Subtema.htm">T&#237;tuloSubtema01e 
</select> 
 
<br /> 
 
<textarea name="AreaD" rows="5" cols="50"readonly="readonly"> 
Aqu&#237; puedes leer la descripción de las opciones del menú. 
</textarea> 
<br /> 
<input type="button" value=" Aceptar " onclick="ir()"> 
</form>

M@uR0 · #3 (**permalink**) 10/01/2007, 07:22

Hola Rafael.. Gracias por tu respuesta...
La verdad es que encontre algo que muestra una especie de tooltip con la lista de opciones del Combo (Select), el tema es que el tooltip aparece justo a la derecha donde termina el combo (Select), o sea imaginate si era el ancho del combo lo que me complicaba, el tooltip es casi igual de ancho y al final se me pierde de la pagina...
Estoy modificando para que aparezca en otro sector de la pagina.. Cuando lo temine lo pongo por si le sirve a alguien

jeanclon · #4 (**permalink**) 10/01/2007, 09:14

Pero si quieres publica el codigo que tienes para ver si alguien puede realizar alguna modificacion.

Rafael · #5 (**permalink**) 10/01/2007, 19:28

Esperamos a verlo :)

M@uR0 · #6 (**permalink**) 12/01/2007, 05:46

Ok.. esto fue lo que encontre, pero lo deje ahi mientras, ya que tenia otros temas que terminar, pero aqui va algo como lo k necesito.-

<html>
<head>
<title> SELECT's.</title>
<script language="javascript">

function Descrip(){
document.getElementById('dscr').style.display = 'none'}

</script>
</head>
<body>

<form name=frm>

<span onmouseout="setTimeout('Descrip()',10000)"
style="font:12px sans-serif; position:absolute; width:65px">
<select style="font:12px sans-serif; width:40px"
onmousedown="document.getElementById('dscr').style .display=
'inline'" onchange="Descrip()" onblur="Descrip()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><span id=dscr style="display:none; padding:0 5px;
margin-left:40px; float:right; background:infobackground;
border:1px solid infotext"> Primero<br>Segundo<br>Tercero<br>Cuarto<br>Quinto
</span></span>

</form>
</body>
</html