Añadir un tooltip a los elementos de un DropDownList


En ocasiones necesitamos utilizar controles de tipo SELECT cuyo ancho es demasiado pequeño para que su contenido sea completamente visible.

Una solución parcial a este problema es la de agregar un tooltip a cada elemento que resalte el contenido del mismo al pasar el ratón por encima.

Una forma sencilla (pero que desgraciadamente no funciona en todos los navegadores) consiste en agregar el elemento title a cada uno de los elementos option del select.

<select name=”Combo”>
    <option title=”Primer elemento”>Primer elemento</option>
    <option title=”Segundo elemento”>Segundo elemento</option>
    <option title=”Tercer elemento”>Tercer elemento</option>
    <option title=”Cuarto elemento”>Cuarto elemento</option>
    <option title=”Quinto elemento”>Quinto elemento</option>
    <option title=”Sexto elemento”>Sexto elemento</option>
    <option title=”Séptimo elemento”>Séptimo elemento</option>
    <option title=”Octavo elemento”>Octavo elemento</option>
</select>

Por desgracia, realizar esta opción en HTML puro y duro no resulta demasiado efectivo si queremos cambiar el contenido dinámicamente. Para realizar esta acción es .NET, partiríamos de un control de tipo DropDownList, al que llamaremos, por ejemplo, DropDownListElementos.

<asp:DropDownList ID=”DropDownListElementos” runat=”server”></asp:DropDownList>

Rellenaremos el contenido del control asignándole un origen de datos, por ejemplo, un DataTable llamado dt.

DropDownListElementos.DataSource = dt;
DropDownListElementos.DataValueField = dt.Columns[0].ColumnName;
DropDownListElementos.DataTextField = dt.Columns[1].ColumnName;
DropDownListElementos.DataBind();

Ahora que nuestro DropDownList contiene elementos, añadiremos de forma dinámica el atributo title a cada uno de sus elementos.

if (DropDownListElementos != null)
    foreach (ListItem li in DropDownListElementos.Items)
        li.Attributes.Add(“title”, li.Text);

Hecho esto, se añadirá, por ejemplo, en el método Load de la página que deseemos incluir este atributo, justo después de haber rellenado los elementos del DropDownList.

Title de un elemento de un SELECT

Title de un elemento de un SELECT

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s