Click here to Skip to main content
15,311,014 members
Articles / Web Development / HTML
Posted 1 Jun 2007


33 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.39/5 (27 votes)
1 Jun 2007CPOL2 min read
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


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)

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 !


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


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

Comments and Discussions

QuestionPowershell form Pin
Member 109951823-Dec-14 21:49
MemberMember 109951823-Dec-14 21:49 
GeneralMy vote of 5 Pin
Raihan Sharif Mridha10-Mar-11 23:41
MemberRaihan Sharif Mridha10-Mar-11 23:41 
GeneralIt is not working in IE for me. Please suggest alternate solution. Pin
swethasri40817-Jan-11 23:15
Memberswethasri40817-Jan-11 23:15 
GeneralIt is not working in IE for me Pin
swethasri40817-Jan-11 23:14
Memberswethasri40817-Jan-11 23:14 
GeneralRe: It is not working in IE for me Pin
Mansoor Sarfraz18-Jan-11 0:16
MemberMansoor Sarfraz18-Jan-11 0:16 
GeneralMy vote of 5 Pin
AMIT_BHAGAT7-Aug-10 1:47
MemberAMIT_BHAGAT7-Aug-10 1:47 
GeneralMy vote of 3 Pin
samo_dambroso21-Jul-10 13:51
Membersamo_dambroso21-Jul-10 13:51 
GeneralIt worked for me Pin
JagadishBB29-Dec-09 19:06
MemberJagadishBB29-Dec-09 19:06 
GeneralRe: It worked for me Pin
Mansoor Sarfraz30-Dec-09 17:59
MemberMansoor Sarfraz30-Dec-09 17:59 
GeneralBeautifull Pin
Vimalsoft(Pty) Ltd17-Jun-09 1:10
professionalVimalsoft(Pty) Ltd17-Jun-09 1:10 
Generalthis code did not worked for me. no tool tip visible Pin
Member 350019810-Mar-09 19:56
MemberMember 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 Pin
jmitch42118-Feb-09 8:03
Memberjmitch42118-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] Pin
Mansoor Sarfraz18-Feb-09 18:52
MemberMansoor Sarfraz18-Feb-09 18:52 
GeneraljQuerish-way! Pin
Vahid_N4-Feb-09 10:58
MemberVahid_N4-Feb-09 10:58 
GeneralWould not possible! Pin
djinges28-Jan-09 23:09
Memberdjinges28-Jan-09 23:09 
GeneralThis code did not work for me Pin
anjii14-Jan-09 8:29
Memberanjii14-Jan-09 8:29 
AnswerRe: This code did not work for me [modified] Pin
Mansoor Sarfraz15-Jan-09 4:09
MemberMansoor Sarfraz15-Jan-09 4:09 
GeneralMy vote of 1 Pin
Nerraj5-Dec-08 1:24
MemberNerraj5-Dec-08 1:24 
AnswerRe: My vote of 1 [modified] Pin
Mansoor Sarfraz15-Jan-09 4:09
MemberMansoor Sarfraz15-Jan-09 4:09 
GeneralNice Article Pin
sund7wells1-Dec-08 20:01
Membersund7wells1-Dec-08 20:01 
QuestionDoes not works for listbox inside the gridview control Pin
Member 19090359-Sep-08 19:07
MemberMember 19090359-Sep-08 19:07 
AnswerRe: Does not works for listbox inside the gridview control [modified] Pin
Mansoor Sarfraz10-Sep-08 20:32
MemberMansoor Sarfraz10-Sep-08 20:32 
GeneralNot quite the same - but quick and dirty workaround on IE 6 Pin
hground7-Aug-08 8:34
Memberhground7-Aug-08 8:34 
GeneralThe same thing with Javascript Pin
ab_dc24-May-08 2:06
Memberab_dc24-May-08 2:06 
GeneralRe: The same thing with Javascript Pin
Madhu Rangarajan20-Jul-09 21:27
MemberMadhu Rangarajan20-Jul-09 21:27 

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

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