aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Bind or add tooltip for dropdownlist items in | Handle Long text problem in dropdownlist using

Dec 19, 2011

In this article I will explain how to add tooltip for dropdownlist item in

In Previous article I explained clearly how to bind images to dropdownlist. Now I will explain how to add tooltips for dropdownlist item in In many situations we will use dropdownlists in our application if it contain less length of data then it will display the data correctly otherwise if it contains more length of data then user will not be able to see entire data that would be like this 

To solve this problem if we add tooltip for dropdownlist items then users have a chance to see entire data.

To implement this concept first design table in your database and enter data as shown below
Column Name
Data Type
Allow Nulls
int(set identity property=true)

After completion of table creation enter some dummy data in table and design your aspx page like this

<html xmlns="">
<head runat="server">
<title>Bind Tooltips for Dropdownlist</title>
<form id="form1" runat="server">
<asp:DropDownList ID="ddlDetails" runat="server" ondatabound="ddlDetails_DataBound"/>
After completion of aspx page design add following namespaces in code behind

C#.NET Code

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
After add namespaces write the following code

 protected void Page_Load(object sender, EventArgs e)
protected void BindDropdown()
SqlConnection con =new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
SqlCommand cmd = new SqlCommand("select UserId,UserName from UserInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
ddlDetails.DataTextField = "UserName";
ddlDetails.DataValueField = "UserId";
ddlDetails.DataSource = ds;
protected void ddlDetails_DataBound(object sender, EventArgs e)
DropDownList ddl = sender as DropDownList;
foreach (ListItem li in ddl.Items)
li.Attributes["title"] = li.Text;


Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI.WebControls

Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
End If
End Sub
Protected Sub BindDropdown()
Dim con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Dim cmd As New SqlCommand("select UserId,UserName from UserInformation", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
ddlDetails.DataTextField = "UserName"
ddlDetails.DataValueField = "UserId"
ddlDetails.DataSource = ds
End Sub
Protected Sub ddlDetails_DataBound(ByVal sender As Object, ByVal e As EventArgs)
Dim ddl As DropDownList = TryCast(sender, DropDownList)
If ddl IsNot Nothing Then
For Each li As ListItem In ddl.Items
li.Attributes("title") = li.Text
End If
End Sub
End Class
Now run your application and check how your dropdownlist will be 


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


kedar said...

I can't understand the second part "ddlDetails_DataBound" and the [key] used in attributes. Please make me clear.

Suresh Dasari said...

ddlDetails_DataBound condition is used to iterate through all the items of dropdownlist and bind the tooltip for each item in dropdownlist.
Attributes["title"] this attribute help us to add tooltip for particular element

sathwik said...

excellent work :)

Swati More said...

I am using exactly the same code mentioned above . When i debug i can see the values of dropdownlist in listitem but can't see the value on dropdown on mouseover. I am uisng IE7.

ANIL BABU Mandla said...

I have one requirement
Drop down list to choose types: NFC/RFID reader
when user choose reader show description in Label

Description for RFID Reader : Reading range 6-12 Meteres.

Description for NFC Reader : Reading Range 3-5 mm.
give me the source code

Anonymous said...


a fine solution.


Anonymous said...

Hi, If the control is inside the update panel, this functionality not working.

Ravikumar Nikkala said...

I need to maxmize font size and change to background color . Is it possible for this scenario.

Anonymous said...

Not working in IE

vnk said...

how to read Tooltip value of selected item in dropdownlist?????

vnk said...

how to read Tooltip value of selected item in dropdownlist?????

Anonymous said...

how to read Tooltip value of selected item in dropdownlist?????

Give your Valuable Comments

Other Related Posts

© 2010-2012 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.