CodeSnip: Adding a ToolTip for Each List Item
page 1 of 1
Published: 26 Jan 2009
Abstract
In this code snippet, Abdulla demonstrates how to add a ToolTip for each item in a DropDownList, which the regular DropDownList does not support. After providing a brief introduction, he examines the procedure in a step-by-step manner with related screen shots. He also analyzes the browser code generated during run time and explores additional scenarios to add advanced functionality using the discussed concept.
by Abdulla Hussein AbdelHaq
Feedback
Average Rating: 
Views (Total / Last 10 Days): 33403/ 90

Introduction

In some cases, you have a restricted design that forces you to place a DropDownList control inside a "td" or "div" element, which has a fixed width. If that DropDownList contains long pieces of text then the user will not be able to read the whole text (as illustrated in Figure 1).

Figure 1: Users cannot read the item

The best solution to overcome this problem is to add a ToolTip for the item to display the whole text. As we know, the regular DropDownlist does not support that which is the main goal of this article.

Finding the Solution

Let us say that we have a DropDownList that contains three list Items.

Listing 1

<asp:DropDownList ID="DropDownList1" runat="server" Width="119px">
  <asp:ListItem Value="1">Technical Department</asp:ListItem>
  <asp:ListItem Value="2">Production Department</asp:ListItem>
  <asp:ListItem Value="3">HR Department</asp:ListItem>
</asp:DropDownList>

As I said, the regular DropDownList does not support a ToolTip for each list item, so we will add a new attribute for each list item which is the "title" attribute.

Listing 2

foreach (ListItem _listItem in this.DropDownList1.Items)
{ 
  _listItem.Attributes.Add("title", _listItem.Text); 
}

As you can see in Listing 2, we wrote a foreach loop to walk through the DropDownList item-by-item to add the title attribute.

You can enter any text to represent the ToolTip for the item as description; here in our example I am using the list item text to be its ToolTip.

We need to add a title attribute for the selected item too, as shown in Listing 3.

Listing 3

DropDownList1.Attributes.Add("onmouseover", 
  "this.title=this.options[this.selectedIndex].title");

View Browser Source Code

If you view your code in a browser (right click on the page and choose view source), take a look at the HTML render element for our DropDownList in listing 4. Note that a new title attribute IS added for each item in the list.

Listing 4

<select name="DropDownList1" id="DropDownList1" 
    onmouseover="this.title=this.options[this.selectedIndex].title" 
    style="width:119px;">
  <option value="1" title="Technical Department">Technical Department</option>
  <option value="2" title="Production Department">Production Department</option>
  <option value="3" title="HR Department">HR Department</option>
</select>

Figure 2: ToolTip for each Item

The above figure shows you how our new ToolTip works when the mouse goes over the list item.

What is more?

You can create a new custom control that inherits from DropDownList class, and that custom control will contain a new property called "TooltipDataField." This will allow developers to bind data to display it in the tooltip of each item.

Conclusion

In this article, we have added a new ToolTip attribute for each item in the DropDownList which will help the users to read the whole text. I hope you found this useful and informative. If you have any questions, please write your comments below.



User Comments

Title: chameleon script   
Name: catherinawebmaster@gmail.com
Date: 7/12/2012 4:59:39 AM
Comment:
Chameleon is a powerful, secure, fast and stable PHP/MySQL online social network script with unlimited functionality, modification options and easy design/layout customization.
Title: Adding a ToolTip for Each List Item   
Name: Mithilesh k. Upadhyay
Date: 7/12/2012 12:26:18 AM
Comment:
Hi,,

This article helped me so much,,,,i searched every where but there were no exact code like this,,,

so very thanks.
Title: local search engine marketing   
Name: Speir Dillard
Date: 6/13/2012 7:13:56 AM
Comment:
We are a SEO, SEM, and online advertising firm based in Los Angeles. Our experts specialize in search engine optimization, Internet marketing, local business listings, and other SEM services.
Title: titel on ddl for ie6   
Name: Ajay
Date: 5/8/2012 5:30:41 AM
Comment:
It is not workin in case of IE6.
Title: in chrome this title option is not workin   
Name: udaya kumar
Date: 8/16/2011 4:03:32 AM
Comment:
Hi,
In Google chrome,this title property is not working.Please let me know what is the issue.
Thanks,
Udaya Kumar
Title: Not workin   
Name: suneel(suneelcse@gmail.com)
Date: 3/21/2011 1:47:10 AM
Comment:
Hi Abdulla,
I implemented your code but irrespective of the item i'm placing the mouse on it's showwin title of the selected item..c an you please tell me how to fix it?
Title: How to show tooltip for downdownlist   
Name: Mangat
Date: 3/17/2011 6:11:28 AM
Comment:
The information that I got from this page has really solved my problem. Thanks
Title: Thanks   
Name: Bill
Date: 1/4/2011 12:00:39 PM
Comment:
Thanks, this helped a lot :)
Title: Auto Post Back   
Name: rkhalaf
Date: 12/20/2010 4:25:00 AM
Comment:
Thanks Mr.Abdulla.

But what must be happens if the ddl auto post back???!!!
any idea???

Regards
Title: vissu   
Name: visssu
Date: 11/23/2010 6:42:42 AM
Comment:
it was great exeperience
Title: THANKS A LOT!!   
Name: Daniel
Date: 9/21/2010 10:34:34 AM
Comment:
Nice job!!

thanks!
Title: Hey this is not working at all   
Name: Savy
Date: 7/20/2010 9:18:30 AM
Comment:
Hey this is not working at all
Title: thanks very much   
Name: haya
Date: 5/24/2010 3:04:32 AM
Comment:
really helpful , thankx for it
Title: Please help   
Name: Vasiliska
Date: 4/14/2010 4:40:50 AM
Comment:
How it'll be look in vb.net?
Title: Saurabh   
Name: Saurabh
Date: 3/16/2010 1:39:34 PM
Comment:
Good good thanks for it.
Title: IhorKo   
Name: thanks
Date: 3/3/2010 6:41:00 AM
Comment:
Thanks for great post. But better use:
onchange="this.title=this.options[this.selectedIndex].title"

instead of "onmouseover" event, then it:
1. will not hide dropdownlist before you choose some item and mouse over the control
2. will show tooltip for each item in the list when it's expanded
Title: How to make it work for IE6   
Name: gzg
Date: 2/25/2010 4:22:57 AM
Comment:
I am using IE6, how can i make it work for IE6. Do you have any sugessions.
Appreciate your help in this regard.

Thanks
Debarati
Title: Does not work after postback   
Name: Manisha
Date: 2/3/2010 6:08:19 AM
Comment:
This will work, But only if the page will not get refreshed. This will stop working once the changed event od DRopdown gets fired.
Title: Does not work after postback   
Name: codejedi
Date: 1/22/2010 5:08:37 PM
Comment:
this does not work after a postback as the title attribute is not saved in the viewstate or anywhere else..
do you have a solution?
Title: How to make it work for IE6   
Name: Debarati
Date: 1/12/2010 1:49:55 PM
Comment:
I am using IE6, how can i make it work for IE6. Do you have any sugessions.
Appreciate your help in this regard.

Thanks
Debarati
Title: Very Nice   
Name: Amy
Date: 12/18/2009 1:27:15 PM
Comment:
This is exactly what I needed!!! And it was soooo easy to include. I just wish I had come up with it.
Many sincere thanks!
Title: Thanks a lot   
Name: khizar Hayat
Date: 10/22/2009 6:24:04 AM
Comment:
Thanks a lot dear, i was searching this work from many days, u solved my problem,
May Allah bless u.
Title: This Code Not Support in IE6   
Name: Paresh Patel
Date: 9/22/2009 12:52:31 AM
Comment:
Please send me how to set tooltip of Dropdown list item which is support in IE6 and Ie7
Title: Re: alternative for IE6   
Name: Abdulla [Author]
Date: 9/15/2009 10:04:15 AM
Comment:
Hi Nags,
well it is a nice challenge. and I will try to build it. wish me luck.
Title: alternative for IE6   
Name: Nags
Date: 9/15/2009 4:19:15 AM
Comment:
Abdulla,
Do you have code for a new custom control, consists of "textbox", "image buttom" and "div element", the div element will be the dropdownlist(like javascript menu).

Thanks,
Nags
Title: RE: One suggestion   
Name: Abdulla AbdelHaq [Author]
Date: 8/1/2009 2:29:54 PM
Comment:
Hello Kiran,
Well I am happy that it helped you.
Thanks for the suggestion. but if you removed the mentioned line, then the tooltip will not be shown for the selected item.
Title: One suggestion   
Name: Kiran
Date: 8/1/2009 10:57:47 AM
Comment:
You dont need to add the below code in cs
foreach (ListItem _listItem in this.DropDownList1.Items)
{
_listItem.Attributes.Add("title", _listItem.Text);
}

Just the javascript will do the magic. I tesetd in IE7
Change the javascript like below

DropDownList1.Attributes.Add("onmouseover",
"this.title=this.options[this.selectedIndex].text");

If we avoid that in cs we can reduce the html size coz the title value is duplicated( its equal to the text value)
Title: Really helped me to save many hours   
Name: Kiran
Date: 8/1/2009 10:47:35 AM
Comment:
Great work thats alot
Title: Re: Great Effort   
Name: Abdulla [Author]
Date: 5/21/2009 11:40:31 AM
Comment:
Hello Rameez,
Actually, the title attribute is an html attribute used to display some kind of hint or a tooltip for some HTML elements. one of these elements is "TD" element, you can add a title attribute to display a tooltip over that TD.
However, I tried to deal with the dropdownlist element as a TD. even the dropdownlist element does not support the title attribute, so I decide to add it programaticly, and it works :)

I hope you found this very helpful.
Title: Great Effort   
Name: Rameez
Date: 5/20/2009 12:42:47 AM
Comment:
Hi,
Thanks for shairing this useful code one thing more why we are adding title attribute only ? Is there any particular reason of using title attribute .
Best Regards
Title: Great stuff ..   
Name: Skullfarar
Date: 4/15/2009 7:49:16 AM
Comment:
.. but it seems that once I select an item it ceases to function. After selection I cant get no tooltip (IE7). D'you know why?
Title: nice   
Name: reshma
Date: 3/30/2009 2:15:58 AM
Comment:
great job
Title: Thanks   
Name: Manroalman
Date: 3/18/2009 5:55:03 PM
Comment:
Thank for this code. It's wonderful
Title: grate   
Name: Aruni
Date: 3/18/2009 2:27:51 AM
Comment:
very helpfutl

Thanks
Title: Re: Question   
Name: Abdulla [The Author]
Date: 2/4/2009 2:33:23 PM
Comment:
title attribute does not work in IE6.
I thought that people now a days are using IE7 and plus, so I tried to solve it using the simplest way!
As I said before, we can create a new custom control, consists of "textbox", "image buttom" and "div element", the div element will be the dropdownlist(like javascript menu). In that case, you will customize the control as you like.
Title: Question   
Name: rodg12
Date: 2/4/2009 12:45:30 PM
Comment:
Abdulla,
Do you have any idea how to get this to work in IE6?
Title: ye great   
Name: manpreet
Date: 2/4/2009 12:09:44 PM
Comment:
great knowledge thx, its working
Title: Re: Problem   
Name: Abdulla [The Author]
Date: 2/4/2009 8:17:21 AM
Comment:
What is your browser?
Title: Problem   
Name: Suri
Date: 2/4/2009 6:56:25 AM
Comment:
I tried this, but i am not getting as seen in the pictures. Can you tell me what might be the problem is?
Title: Nice trick   
Name: Saber
Date: 1/28/2009 5:04:43 PM
Comment:
Thanks for useful knowledge.
Regard
Title: thanks a lot   
Name: mona
Date: 1/28/2009 6:41:44 AM
Comment:
thanks for new knowledge you teach me
Title: Re: Very nice brother.   
Name: Abdulla [the Author]
Date: 1/28/2009 4:24:58 AM
Comment:
Yes it is applicable but not with the regular dropdown.
What you need is to create a new custom control that consist of Textbox and image button. Thinking about like developing a JavaScript menu. So when you click on the image button then you will display a dropdown menu (which will contain the text with image).
It’s a trick :)
Title: Very nice brother.   
Name: Ferhan
Date: 1/28/2009 3:47:30 AM
Comment:
Very nice article. I have posted a problem on www.refactorcode.com regarding dropdown with image can u refactor it. If u do so I will be very thankful to u.

Allah Hafez
Title: Great work   
Name: Deadmanwalking
Date: 1/27/2009 12:27:47 PM
Comment:
I never thought its going to be so simple thAnkX.....Good Work
Title: great and simple   
Name: Undying Evil
Date: 1/27/2009 3:44:47 AM
Comment:
nice and simple code keep on the good work
Title: Great work   
Name: Yaser
Date: 1/27/2009 3:00:10 AM
Comment:
This is very helpful ... appreciated.
Title: Good Job   
Name: Rajendra
Date: 1/26/2009 11:03:19 PM
Comment:
Thanks
Title: Thanx   
Name: Sohaib
Date: 1/26/2009 11:13:55 AM
Comment:
Thank you man that was great job

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 9/21/2014 12:47:15 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search