Click here to Skip to main content
Click here to Skip to main content
Go to top

Adding a tool tip to dropdown list and list box controls in Internet Explorer

, 1 Jun 2007
Rate this:
Please Sign up or sign in to vote.
Internet Explorer does not always show the full contents of dropdown lists and list boxes. This means if the data in the list box is bigger thatn the control's witdth, the user will not be able to fully see it. We can show a tooltip of each content to solve the problem.

Screenshot - tooltip.jpg

Introduction

As you can see in the above image, the rendering by Internet Explorer of the drop down / list box is not appropriate. It does not display the text which is out of the width of the control. To solve the problem, we can add a tooltip with the contents so that the user can read the full value.

Using the code

To solve the problem, I searched the Internet, but no appropriate solution was found. Although, some good third party controls were available which could display the contents using a combination of button, edit box, and div etc. But their management was also a problem. A solution that came into mind was to display the tool tip along with every element of the control so that the text of the non visible area could be viewed using the tool tip. The tool tip will be bound at server side and will work for both Firefox and Internet Explorer. Following is the code for binding a tool tip with a control.

//
// This method binds tooltip with a dropdown/ any list control
//
public static void BindTooltip(ListControl lc)
{
    for (int i = 0; i < lc.Items.Count; i++)
    {
        lc.Items[i].Attributes.Add("title", lc.Items[i].Text);
    }
}

Here the "title" attribute is the magic which adds the tooltip with each list item.

All you have to do is to call this function after binding all the values with the control. You can save this code in your helper file and call wherever you need it. If you have more then one control in your page for which you want to attach the tool tip, you don't need to call this function many times but simply call another overload of it. This overload function will search the list boxes in the page and will attach the tool tip against every control that it will find.

public static void BindTooltip(System.Web.UI.Page p)
{
    if (p == null || p.Form == null)
            return;
        BindTooltip(p.Form.Controls);
}

To make my work more easy, I just put the code in my master page. Every page that uses the master page will get the tooltip automatically as shown in the sample.

The complete source code is attached in the sample application.

Enjoy! Happy programming !

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mansoor Sarfraz
Web Developer
Pakistan Pakistan
Mansoor Sarfraz works in a well reputed multinational software development company. Software development is not only his duty but his passion too. In his professional career he was Involved in the development of resource/content management system, workflow based systems, enterprise projects based on MS Windows DNA architecture and .NET framework, web based rich client UI development, Rest based backend web services and windows services for different systems. He was also involved in software designing and architecture. He has expertise in C#.NET, ASP.NET, Sql Server, Adobe Flex, Java, Ajax and JavaScript.
 
You can reach him through his blog
http://mansoorsarfraz.blogspot.com
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRaihan Sharif Mridha10-Mar-11 23:41 
GeneralIt is not working in IE for me. Please suggest alternate solution. Pinmemberswethasri40817-Jan-11 23:15 
GeneralIt is not working in IE for me Pinmemberswethasri40817-Jan-11 23:14 
GeneralRe: It is not working in IE for me PinmemberMansoor Sarfraz18-Jan-11 0:16 
GeneralMy vote of 5 PinmemberAMIT_BHAGAT7-Aug-10 1:47 
GeneralMy vote of 3 Pinmembersamo_dambroso21-Jul-10 13:51 
GeneralIt worked for me PinmemberJagadishBB29-Dec-09 19:06 
GeneralRe: It worked for me PinmemberMansoor Sarfraz30-Dec-09 17:59 
GeneralBeautifull PinmemberVuyiswa Maseko17-Jun-09 1:10 
Generalthis code did not worked for me. no tool tip visible PinmemberMember 350019810-Mar-09 19:56 
Generalwhen i use this for 2 separate drop down lists it clears the first ddl when i call it for the second ddl Pinmemberjmitch42118-Feb-09 8:03 
GeneralRe: when i use this for 2 separate drop down lists it clears the first ddl when i call it for the second ddl [modified] PinmemberMansoor Sarfraz18-Feb-09 18:52 
GeneraljQuerish-way! PinmemberVahid_Nasiri4-Feb-09 10:58 
GeneralWould not possible! Pinmemberdjinges28-Jan-09 23:09 
GeneralThis code did not work for me Pinmemberanjii14-Jan-09 8:29 
AnswerRe: This code did not work for me [modified] PinmemberMansoor Sarfraz15-Jan-09 4:09 
GeneralMy vote of 1 PinmemberNerraj5-Dec-08 1:24 
AnswerRe: My vote of 1 [modified] PinmemberMansoor Sarfraz15-Jan-09 4:09 
GeneralNice Article Pinmembersund7wells1-Dec-08 20:01 
QuestionDoes not works for listbox inside the gridview control PinmemberMember 19090359-Sep-08 19:07 
AnswerRe: Does not works for listbox inside the gridview control [modified] PinmemberMansoor Sarfraz10-Sep-08 20:32 
GeneralNot quite the same - but quick and dirty workaround on IE 6 Pinmemberhground7-Aug-08 8:34 
GeneralThe same thing with Javascript Pinmemberab_dc24-May-08 2:06 
GeneralRe: The same thing with Javascript PinmemberMadhu Rangarajan20-Jul-09 21:27 
Generaltooltip Pinmemberkartzferrari13-Mar-08 19:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 1 Jun 2007
Article Copyright 2007 by Mansoor Sarfraz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid