Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 31, 2010

ASP.NET: ListBox Tooltip

Filed under: ASP.NET,C#,VB.NET @ 6:47 pm

The ASP.NET ListBox does not display a horizontal scroll bar by default, which can be a problem if any of your list items are too long to fit. One solution to this problem is to use a tooltip. As the user moves the mouse over the ListBox entries, the full text appears in a tooltip.

image

The code to accomplish this is as follows:

In C#:

private void LB_PreRender(object sender, System.EventArgs e)
{
    foreach (ListItem item in LB.Items) {
        item.Attributes.Add("title", item.Text);
}

In C#, you also need to set up the event handler. In this example, the event handler is set up in the Page_Load event, but you could put it where it makes sense for your application.

LB.PreRender += LB_PreRender;

In VB:

Private Sub LB_PreRender(ByVal sender As Object, _
     ByVal e As System.EventArgs) Handles LB.PreRender
    For Each item As ListItem In LB.Items
        item.Attributes.Add("title", item.Text)
    Next
End Sub

The ListBox, named LB in this example, has a PreRender event. In the PreRender event the code loops through the ListBox items and sets the title attribute to the text of the item.

Use this technique any time you want to display a tooltip over your ListBox items.

Enjoy!

17 Comments

  1.   Tony G — December 29, 2011 @ 3:55 pm    Reply

    I am fairly new to VB.NET and do not quite understand how to call this bit of code. I am unclear as to what parameters to pass it. Can anyone help? Also, i am interested in using it like Mahesh Vijayakumar who said, “But i guess it works only when a datasource in bound with it. How could we dispaly the tool tip for the same control when the data is loaded into it dynamically.. I may add or remove the items from the control at some point. “

  2.   priya — October 10, 2012 @ 1:40 am    Reply

    it worked gr8

  3.   suresh — February 20, 2013 @ 12:10 am    Reply

    neat code..gr8 help…works like a charm…thanks :)

  4.   xyz — April 12, 2013 @ 4:07 pm    Reply

    It is gr8!!

  5.   DJT — October 17, 2013 @ 4:15 pm    Reply

    Since I did not see any response to the Questions what do I do if I am not using a data bound list.
    Here is a suggestion:
    When your list box changes call a function that will update the items for your list box.
    This also works fine when you have your data bound as well just call it after you do your call your databind. Exp. ( Lb1.Databind(); setToolTip(Lb1); )
    In this example I have 3 list boxes Lb1, Lb2, and Lb2.
    I am moving items from one list box to the next.

    protected void AddToBox2_Click(object sender, System.Web.UI.ImageClickEventArgs e)
    {
    //moved items from Box 1 to Box 2

    setToolTip(Lb1);
    setToolTip(Lb2);
    setToolTip(Lb3);
    }

    Private void setToolTip(ListBox myBox)
    {
    Foreach(ListItem item in myBox.Items)
    {
    Item.Attributes.Add(“title”,item.Text);
    }
    }

  6.   Amul — January 2, 2014 @ 3:40 am    Reply

    very nice!!

  7.   wicked — January 2, 2014 @ 2:40 pm    Reply

    You have no idea how many different sites I’ve been to to get these result. I understand that in code there’s always a million different ways of achieving the same result but WOW!! Your solution is 2 lines of code, everyone else pretty much wrote a mini program. Great solution works perfectly. I appreciate the brevity and clarity.

RSS feed for comments on this post. TrackBack URI

Leave a comment

*

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs