Tooltip en select PHP

[alavaros]

Buenas, tengo un select, que se crea con datos de la BD, con PHP, y necesito que para cada opción, haya un tooltip que describa la opción. El texto del tooltip no está en la misma tabla que el contenido del select, pero me gustaría saber las distintas formas, con el texto "a pelo", o con el texto en la BD.

Saludos.

[maycolalvarez]

podrías usar javascript para modificar el title global del select o usar un código o plugin de tooltip de algún framework javascript, pero esto no depende de php

nota: un title para cada option funciona en FF, pero es posible que no funcione en otros como chrome

[alavaros]

Iniciado por maycolalvarez

podrías usar javascript para modificar el title global del select o usar un código o plugin de tooltip de algún framework javascript, pero esto no depende de php

nota: un title para cada option funciona en FF, pero es posible que no funcione en otros como chrome

OKi, gracias, veré eso q me dices.

saludos

[Jfco]

//Puedes definirte un tooltip a tu medida con CSS y administrarlo mediante PHP.
//Por ejemplo, con PHP puedes "cargar" desde una base de datos el texto que vas a mostrar en ese tooltip.


//Codigo PHP
//========

//Ej.- Obten los numeros y nombres de Cliente desde la Base de datos...
// Para el Tooltip, concatena todo ese texto dentro de lo que va a ser el propio 'span'...

$span = "<BR>Clientes posibles:<BR>";

$select="SELECT orden, cliente FROM users";
$qry = mysql_query($select,$link)
or die("<BR>" . mysql_error() . "<BR><BR> Error_sql_command!!!... <BR>" . $select);
// Finaliza la Aplicacion!!!...

while($row = mysql_fetch_array($qry)) {
$span .= $row[0] . " - " . $row[1] . "<BR>";
}


//muestra la viñeta creada al tocar la imagen...
<a class="tooltips" href=""><IMG SRC="cliente.jpg" WIDTH=28 HEIGHT=28><span>' . $span . ' </span></a>




//Codigo CSS
//========
//Asigna propiedades al tooltip como el ancho y alto que necesites para mostrar toda esa informacion.
//Posiciona, a tu gusto, la viñeta creada dentro de la pantalla HTML.


a.tooltips {
color: white;
font-family:"Times New Roman",serif;
font-style:italic;
font-size: 1.2em;
background: darkgray;
padding: 2px 2px 2px 2px;
position: relative;
display: inline;
}

a.tooltips span {
position: absolute;
color: #FFFFFF;
width:200px;
background: gray;
height: 500px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}

a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: -240px;
left: -1250%;
margin-left: 80px;
z-index: 999;
}