Adding ToolTip for each List Item.

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 you can see in Figure1.

Figure 1

 

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 post.

Lest us say that we have a DropDownList that contains three list items.

Code 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.

Code 2


foreach (ListItem _listItem in this.DropDownList1.Items)



  _listItem.Attributes.Add(
"title", _listItem.Text);

}

As you can see in the above code, we wrote a foreach loop to walk through the DropDownList item-by-item to add the title attribtue.

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 below code.

Code 3

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

if you view your code in a browser, right click on the page and choose view source, take a look at the HTML generated element for our DropDownList, in Code 4, note that a new title attribute is added for each item in the list.

Code 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

 

The above figure shows you how our new tooltip works when the mouse goes over the list 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.

 ~ Abdulla AbdelHaq

 

Published Sunday, June 7, 2009 12:43 AM by Abdulla.Abdelhaq

Comments

# re: Adding ToolTip for each List Item.

Monday, June 8, 2009 5:46 AM by pranayMCA

I want the tool tip dynamicaly for each item .

i am binding the listbox items from datatabase.

i like to show tool tip for each items ie. details of that items from database.

for ex i have listbox that contain vehicle number.

i like to show tool tip for vehicle detail ie driver name etc from database.

# re: Adding ToolTip for each List Item.

Monday, June 22, 2009 2:38 PM by Vijay

Very well-written article. Thanks, I could probably use this technique in my project too.

# re: Adding ToolTip for each List Item.

Thursday, September 10, 2009 3:16 AM by xuyun

your example for Code 4  that is not display for ie 6,only for ie7

# re: Adding ToolTip for each List Item.

Thursday, September 10, 2009 5:06 AM by Abdulla.Abdelhaq

Are you still using IE6 ?!

yes title attribute will work only for IE7 and plus. but you can work around this by creating custom control or some thing like that

# re: Adding ToolTip for each List Item.

Saturday, October 24, 2009 5:36 AM by Ketki Thakor

This all code in not working IE 6.

# re: Adding ToolTip for each List Item.

Monday, October 26, 2009 8:06 AM by sneaker

Any idea how to display the tooltip in IE6?

Thanks,

# re: Adding ToolTip for each List Item.

Wednesday, November 4, 2009 3:07 PM by Luis H

Muy bueno este script, me sirvió en mi programación. Gracias Abdulla por compartir.

LUIS

# re: Adding ToolTip for each List Item.

Friday, December 18, 2009 3:17 PM by Charles C

Is is possible to add an imageButton for each List Item in a dropdownlist?? If so, would you show how that is done... thank you

# re: Adding ToolTip for each List Item.

Tuesday, January 19, 2010 5:31 AM by mraadi

Many thankx May ALLAG Bless you!

mraadi@yahoo.com

# re: Adding ToolTip for each List Item.

Friday, January 22, 2010 4:50 PM by nick13

the title attribute does not persist in the viewstate after a postback..

unless this population of the dropdown is done on every page load..the title disappears..

# re: Adding ToolTip for each List Item.

Monday, March 22, 2010 2:10 AM by Shubham

Thanks for your help. It is working fine keep sending important codes

# re: Adding ToolTip for each List Item.

Wednesday, March 24, 2010 9:08 AM by Prasad

I have drop down and i want to show each item value in tooltip. I added title attribute for each item, but that is working fine in all the versions of IE except IE6. How to show tool tip in IE 6 and how ? I am using JSP and javascript. Dropdown values are coming dynamically from XML.

# re: Adding ToolTip for each List Item.

Tuesday, July 6, 2010 7:49 AM by ramz

what i like is that everytime you list the combo same with access dropdownlist ,, you can adjust the listwidth

# re: Adding ToolTip for each List Item.

Thursday, July 29, 2010 9:19 AM by james.asp.net

Hi,

The approach doesn't work when ESRI ADF is working.  Should the attribute of title be registered to the page?  All the titles are added to the page on client side (it can be verified by "view source") but just don't work.  Any hint would be appreciated.

# re: Adding ToolTip for each List Item.

Saturday, September 25, 2010 5:43 AM by Bhavan

Hi Abdullah,

      I have done the coding as per ur information. Im having my dropdownlist in my infragistics webgrid Templated column. The tooltip is not showing up while mouseover the listitems. But im able to see in view source page the title for the each item in the dropdownlist is added. Any Ideas.....

# re: Adding ToolTip for each List Item.

Saturday, September 25, 2010 6:11 AM by Bhavan

Hi Abdullah,

         I figured out my issue.

Regards,

Bhavan P

# re: Adding ToolTip for each List Item.

Wednesday, October 20, 2010 6:15 AM by Vipin

Thanx Very nicely Written and explained Thank u

# re: Adding ToolTip for each List Item.

Saturday, October 23, 2010 11:12 AM by Archiver

Intresting opinion, are you sure in you point of view, huh?

# re: Adding ToolTip for each List Item.

Wednesday, November 17, 2010 1:08 AM by santosh198318

gud article

# re: Adding ToolTip for each List Item.

Monday, December 6, 2010 5:23 PM by CodeJedi

how do you fix the issue of having the dropdown in a usercontrol. when you have the dropdown in a usercontrol and the usercontrol in a page..this will not work anymore..

thanks

# re: Adding ToolTip for each List Item.

Wednesday, December 8, 2010 10:12 PM by Bama Belles

Half a loaf is better than no bread

# re: Adding ToolTip for each List Item.

Tuesday, December 14, 2010 12:58 PM by MKumar

much usefull,  Same I am trying for listbox, but it is througing object expected error from html page. Can we know how to add the attributes for listbox?

# re: Adding ToolTip for each List Item.

Monday, December 20, 2010 8:59 AM by Sam

Tool tip not working if avent fire on page or page get postback(code2)

Please help

it's Urgent

# re: Adding ToolTip for each List Item.

Thursday, December 23, 2010 9:38 AM by Angelo Bernardi

Man, this is not working for me.

I'm Using IE8, and the DropDown doesn't show any tooltip.

The DDL is code-databound, and then I use the code you show here.

When I debug the page, te HTML code shows the "title" property into the <option> tag, but the browser doesn't show the tooltip.

What can be wrong?

Bst rgds

# re: Adding ToolTip for each List Item.

Thursday, December 23, 2010 10:37 AM by Angelo Bernardi

fixd!!

was the postback!

when the page reloads after the postback, the function wasn't called.

=)

bst rgds

# re: Adding ToolTip for each List Item.

Monday, January 17, 2011 10:51 PM by Generico-Nolvadex

Finders keepers, losers weepers

# re: Adding ToolTip for each List Item.

Tuesday, January 18, 2011 7:46 PM by nolvadex(Tamoxifen)

Home is where the heart is

# re: Adding ToolTip for each List Item.

Friday, January 28, 2011 1:19 AM by Simran

Hi,

Tooltip doesnt appear in IE6 or chrome. I have used approach given in code2.Any solution?

# re: Adding ToolTip for each List Item.

Wednesday, February 9, 2011 7:15 PM by Crack Anaya

I shared your text in my twitter account, i like it. Theme very popular for my friends.

# re: Adding ToolTip for each List Item.

Friday, February 11, 2011 6:36 AM by Rapidshare Camila

We've all been there: you can find yourself driving by means of a certain a part of town let you ...

# re: Adding ToolTip for each List Item.

Friday, February 11, 2011 11:25 AM by willow

thnks for this testing :)

# re: Adding ToolTip for each List Item.

Tuesday, March 1, 2011 10:56 AM by samir

ToolTip won't persist on post-back.

You would have to add ToolTip outside if(!Page.IsPostBack) block.

Something along these lines:

if (!Page.IsPostBack)

{

     PopulateDropDown();

}

AddToolTip(yourDropDown);

# re: Adding ToolTip for each List Item.

Monday, March 14, 2011 6:58 PM by dq g f r

Phillip Cannella  m

# re: Adding ToolTip for each List Item.

Friday, March 18, 2011 8:35 PM by KemeImmolfefe

You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.

# re: Adding ToolTip for each List Item.

Friday, March 25, 2011 8:49 AM by Sha

Thanks abdulla.. it reduces my searching & experimental time ... really thanks....

# re: Adding ToolTip for each List Item.

Thursday, April 14, 2011 9:06 PM by sdfsdgfd

Very informative post. Thanks for taking the time to share your view with us.

# re: Adding ToolTip for each List Item.

Friday, April 15, 2011 3:24 AM by Rahul Jain

not working for chrome

how to get it work for chorome

# re: Adding ToolTip for each List Item.

Saturday, April 16, 2011 1:51 AM by chintan

Hey Abdulla,How to disabed dropdown Selected item tooltip using your code?

# re: Adding ToolTip for each List Item.

Saturday, April 16, 2011 8:08 AM by Hire ASP.Net Developer

tooltip is not working in chrome

# re: Adding ToolTip for each List Item.

Thursday, April 21, 2011 8:12 AM by Amit Pure

Thanks,

It saved my lot of time. :)

# re: Adding ToolTip for each List Item.

Saturday, May 21, 2011 9:35 AM by football

Hello! I love watching football and I loved your blog as well.

# re: Adding ToolTip for each List Item.

Monday, June 27, 2011 1:28 PM by Jerrie Girman

An cool blog post there mate . Thanks for the post !

# re: Adding ToolTip for each List Item.

Tuesday, June 28, 2011 8:45 AM by Divya

Solved my problem even on post backs!!!!!!!!

Thank u so much!!!!!!!!!

# re: Adding ToolTip for each List Item.

Wednesday, June 29, 2011 4:21 PM by Hulda Wyllie

The incredibly heart of your writing whilst appearing reasonable originally, did not settle correctly with me personally following some time. Someplace throughout the sentences you really managed to create me a believer but only for a short though. I nevertheless have got a dilemma together with your leaps in logic and you might do nicely to fill in those breaks. In case you really can accomplish that, I could surely be fascinated.

# re: Adding ToolTip for each List Item.

Saturday, July 2, 2011 12:32 PM by Retha Autery

I have even thought of this subject in the past, however haven't came to the conclusion, Sigh ~

# re: Adding ToolTip for each List Item.

Saturday, September 3, 2011 6:18 AM by James

Bhai jaan mera client IE7 k alava kuch use nahi karta, bolo me kya karu?

# re: Adding ToolTip for each List Item.

Wednesday, October 19, 2011 11:02 AM by Rene

Thanks!

Just put code in class method. It works fine. No Page_Init needed

# re: Adding ToolTip for each List Item.

Tuesday, November 8, 2011 9:02 AM by Matt

Nice simple solution and Java/jQuery free.  Not that I dislike them in any way.

# re: Adding ToolTip for each List Item.

Wednesday, December 14, 2011 3:11 AM by Abhishek Mishra

Thanks a lot. It worked exactly fine. Love ur work..

# re: Adding ToolTip for each List Item.

Monday, February 13, 2012 7:13 AM by Webguru

Thank you, but can you please add a demo page or full HTML page?

# re: Adding ToolTip for each List Item.

Friday, March 30, 2012 8:12 PM by Veneno

Funciona perfecto amigo, muchas gracias

# re: Adding ToolTip for each List Item.

Wednesday, July 4, 2012 8:53 AM by Fenil

How to show the tooltip on keyup & keydown event for each item in dropdownlist.

# re: Adding ToolTip for each List Item.

Friday, July 27, 2012 7:17 AM by DanBar

Abdulla, Very helpful. Thanks

# re: Adding ToolTip for each List Item.

Thursday, September 20, 2012 12:08 AM by cheap seo services

Lri4cX Great, thanks for sharing this article.Really looking forward to read more. Fantastic.

# re: Adding ToolTip for each List Item.

Friday, October 19, 2012 8:25 AM by cheap seo services

GfBdF0 I think this is a real great blog article. Awesome.

# re: Adding ToolTip for each List Item.

Monday, November 5, 2012 3:51 AM by ZBqBIjnxNDEvZGX

qfTMZB Hey, thanks for the blog article.Really looking forward to read more. Fantastic.

# re: Adding ToolTip for each List Item.

Thursday, November 8, 2012 11:10 AM by Food Formulation Software

I found your comments really useful and helped me solve a potential issue I had. Thanks for the post.

# re: Adding ToolTip for each List Item.

Monday, November 26, 2012 7:28 PM by YDcAnhaoVRH

Y3bCsP Thanks a lot for the blog article.Much thanks again. Will read on...

# re: Adding ToolTip for each List Item.

Monday, December 3, 2012 6:10 AM by Yang

Hi, I want to say thanks because this works great as the tooltip for the items. However I find it stops the event OnSelectedIndexChanged from firing for my customised DropDownList control? Have you experienced this? If you like, I can paste my code in another comment to show you. Thanks.

# re: Adding ToolTip for each List Item.

Wednesday, December 19, 2012 6:48 AM by Mihir Patel

Thanks. Working fine..

# re: Adding ToolTip for each List Item.

Monday, January 7, 2013 8:33 AM by Sreenivas k k

Hi Friend thanks,

but tool-tip is not working for Opera & Safari browsers. Is as i think these browsers will not support "title"

# re: Adding ToolTip for each List Item.

Tuesday, February 12, 2013 11:01 PM by vivek

how can it be done with IE 6?

Thanks for sharing your feedback! If your feedback doesn't appear right away, please be patient as it may take a few minutes to publish - or longer if the blogger is moderating comments.