Introduction:
In this article I will explain how to add tooltip for dropdownlist item in asp.net.
In this article I will explain how to add tooltip for dropdownlist item in asp.net.
Description:
In Previous article I explained clearly how to bind images to dropdownlist. Now I will explain how to add tooltips for dropdownlist item in asp.net. 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
In Previous article I explained clearly how to bind images to dropdownlist. Now I will explain how to add tooltips for dropdownlist item in asp.net. 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
|
UserId
|
int(set identity property=true)
|
No
|
UserName
|
varchar(50)
|
Yes
|
After completion of table creation enter some dummy data in table and design your aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind Tooltips for Dropdownlist</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlDetails" runat="server" ondatabound="ddlDetails_DataBound"/>
</div>
</form>
</body>
</html>
|
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)
{
if(!IsPostBack)
{
BindDropdown();
}
}
protected void BindDropdown()
{
SqlConnection con =new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
con.Open();
SqlCommand cmd = new SqlCommand("select UserId,UserName from UserInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
ddlDetails.DataTextField = "UserName";
ddlDetails.DataValueField = "UserId";
ddlDetails.DataSource = ds;
ddlDetails.DataBind();
}
protected void ddlDetails_DataBound(object sender, EventArgs e)
{
DropDownList ddl = sender as DropDownList;
if(ddl!=null)
{
foreach (ListItem li in ddl.Items)
{
li.Attributes["title"] = li.Text;
}
}
}
}
|
VB.NET Code
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
BindDropdown()
End If
End Sub
Protected Sub BindDropdown()
Dim con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
con.Open()
Dim cmd As New SqlCommand("select UserId,UserName from UserInformation", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
ddlDetails.DataTextField = "UserName"
ddlDetails.DataValueField = "UserId"
ddlDetails.DataSource = ds
ddlDetails.DataBind()
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
Next
End If
End Sub
End Class
|
Now run your application and check how your dropdownlist will be
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
12 comments :
I can't understand the second part "ddlDetails_DataBound" and the [key] used in attributes. Please make me clear.
@kedar,
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
excellent work :)
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.
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
Thanks,
a fine solution.
AlexW
Hi, If the control is inside the update panel, this functionality not working.
Rajaprabhu.net@gmail.com
I need to maxmize font size and change to background color . Is it possible for this scenario.
Not working in IE
how to read Tooltip value of selected item in dropdownlist?????
how to read Tooltip value of selected item in dropdownlist?????
how to read Tooltip value of selected item in dropdownlist?????
Note: Only a member of this blog may post a comment.