locked
How to add a tooltip to a dropdownlist? RRS feed

  • Question

  • User1969472657 posted
    How to add a tooltip to a dropdownlist?

    Why declaring it in the dropdownlist tag...
    <asp:dropdownlist tooltip=.../>
    ...doesn't work?

    I also have tried to declare it in my codebehind...
    dropSomething.tooltip = "..."
    ... but nothing happens.
    Thursday, July 21, 2005 7:05 AM

Answers

  • User1806792307 posted
    There is a lot of confusion about tooltips on DropDownLists. Here's the facts.

    IE for Windows does not support the Tooltip property or even the title attribute on the <select> control. This is because they create a separate window for the <select> tag that is above the rest of the info on the browser window. (Think of it as another layer.) The tooltip engine is actually on the main window layer, so the tooltip would appear behind the <select> element if it was to appear. This layered behavior also breaks popups that position over <select> tags because they are always on the main window layer!

    The title= attribute is fully supported in the W3C specification, which is used by the DOM-based browsers like Mozilla, FireFox, Netscape, and Safari. So by assigning myDropDownList.Attributes.Add("title", "text"), you will get a tooltip on those browsers!

    Finally, the suggestion to enclose the DropDownList in the <div> with a title= attribute will only work so long as the user does not point to the <select> element itself because of the layering problem.

    We can only hope Microsoft puts <select> tags into the same layer in a future version of IE...
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2005 12:17 PM

All replies

  • User1533493743 posted

    Unfortunately you can not have tool tip on a drop down, but there is work around

    U make a div and put dropdown inside the div, give the title property of the div to whatever text you want to display

    Thursday, July 21, 2005 8:50 AM
  • User541108374 posted
    Hi,

    that's quite normal because the rendered html is a <select> which doesn't contain a property for setting tooltips.

    Grz, Kris.
    Thursday, July 21, 2005 8:54 AM
  • User-837620913 posted
    No, the DropDownList does not have a ToolTip property. The way to achieve this functionality is to add a "title" attribute to the control:

    myDropDownList.Attributes.Add("title","This is my tooltip.")
    or
    myDropDownList.Attributes("title") = "This is my tooltip."
    Thursday, July 21, 2005 8:58 AM
  • User1806792307 posted
    There is a lot of confusion about tooltips on DropDownLists. Here's the facts.

    IE for Windows does not support the Tooltip property or even the title attribute on the <select> control. This is because they create a separate window for the <select> tag that is above the rest of the info on the browser window. (Think of it as another layer.) The tooltip engine is actually on the main window layer, so the tooltip would appear behind the <select> element if it was to appear. This layered behavior also breaks popups that position over <select> tags because they are always on the main window layer!

    The title= attribute is fully supported in the W3C specification, which is used by the DOM-based browsers like Mozilla, FireFox, Netscape, and Safari. So by assigning myDropDownList.Attributes.Add("title", "text"), you will get a tooltip on those browsers!

    Finally, the suggestion to enclose the DropDownList in the <div> with a title= attribute will only work so long as the user does not point to the <select> element itself because of the layering problem.

    We can only hope Microsoft puts <select> tags into the same layer in a future version of IE...
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2005 12:17 PM
  • User-1941199747 posted

     

    Even after adding the dropdownlist in <div> dint solve the problem. I wonder how to do this.

    Is there any property of the drop-down so that the width of drop-downlist automatically gets increased. Or can the right scoll bar be added to the drop-down-list?

    Thursday, September 27, 2007 9:04 AM
  • User499497176 posted

     Peter's (PLBlum) explains the problem perfectly... I use labels for each of my listbox / droplist and I've put the tooltip behind the label instead of the control, again not pretty or perfect but better than nothing.

    Friday, October 19, 2007 7:50 AM
  • User-1933190873 posted

    The strange behavior is: If you add disabled="disabled" to select tag the title text  will appear ???? :D 

    Anyway: This problem solved in IE 7.0.

    Tuesday, March 25, 2008 10:06 AM
  • User-1085267970 posted

    the above code is working fine in firefox but not in ie6 :( is there any way to short it out???

    Saturday, May 31, 2008 2:17 PM
  • User6573499 posted

                 ddlToolTip.Items.Add("Item First");
                ddlToolTip.Items[0].Attributes.Add("title", "Tool Tip");

                ddlToolTip.Items.Add("Item Second");
                ddlToolTip.Items[1].Attributes.Add("title", "Second Item Tool Tip"); 

     

    We can give tool tip by this way also....   The only thing is i did not not check in all browser. but it is working in firefox2.0

     

     

    Saturday, June 7, 2008 6:22 AM
  • User-1763611275 posted

    Hi

    tryt his:

     

    <form id="Form1" method="post" runat="server">
     <asp:DropDownList id="DropDownList1" onmouseover="showDropDownToolTip(this);" onmouseout="hideDropDownToolTip();" runat="server">
      <asp:listitem value="">Select One</asp:listitem>
      <asp:listitem value="Images/Image1.gif">Image1</asp:listitem>
      <asp:listitem value="Images/Image2.gif">Image2</asp:listitem>
      <asp:listitem value="Images/Image3.gif">Image3</asp:listitem>
     </asp:DropDownList>
    
     <div id="divDropDownToolTip" style=";display:none;background:lightyellow;border:1px solid gray;padding:2px;font-size:8pt;font-family:Verdana;" onMouseOut="hideDropDownToolTip()">
      <img id="informationImage" src="" border="0"/>
      <span id="informationText"></span>
     </div>
    </form>
    
    <script type="text/javascript">
    <!--
    function showDropDownToolTip(elementRef) 
    {
     if ( elementRef.options[elementRef.selectedIndex].value == '' )
      return;
    
     // Set to some new image...
     var imageRef = document.getElementById('informationImage');
     imageRef.src = elementRef.options[elementRef.selectedIndex].value;
    
     // Set to information text...
     var informationSpanRef = document.getElementById('informationText');
     informationSpanRef.innerHTML = elementRef.options[elementRef.selectedIndex].text;
    
     var toolTipRef = document.getElementById('divDropDownToolTip');
     toolTipRef.style.top = window.event.clientY + 20;
     toolTipRef.style.left = window.event.clientX;
     toolTipRef.style.display = 'block';
    }
    
    function hideDropDownToolTip()
    {
     document.getElementById('divDropDownToolTip').style.display = 'none';
    }
    // -->
    </script>
    
    
    
    
     
    Wednesday, June 18, 2008 8:37 AM
  • User-384320372 posted

    Hi,

    Add  a ondatabound="ApplyOptionTitles" event to your DropDownList control.

    Then implement in code-behind (C#) as follows: 

    protected void ApplyOptionTitles(object sender, EventArgs e)
    {
       DropDownList ddl = sender as DropDownList;
       if (ddl != null)
       {
            foreach (ListItem item in ddl.Items)
            {
               item.Attributes["title"] = item.Text;
             }
        }
    }

    Wednesday, October 29, 2008 1:46 PM
  • User-1187660785 posted

    Hi,

    Add  a ondatabound="ApplyOptionTitles" event to your DropDownList control.

    Then implement in code-behind (C#) as follows: 

    protected void ApplyOptionTitles(object sender, EventArgs e)
    {
       DropDownList ddl = sender as DropDownList;
       if (ddl != null)
       {
            foreach (ListItem item in ddl.Items)
            {
               item.Attributes["title"] = item.Text;
             }
        }
    }



    This solution works great! Thanks!

    And more : Implement this method only into a class BasePage (which inherits from System.Web.UI.Page) that every web page of your application inherits and link all your DropDownList DataBound events to this method (OnDataBound="ApplyOptionTitles"). You will have only one method for all your DropDownLists of your application.

    Thursday, December 4, 2008 8:22 AM
  • User200531505 posted

    Hi,

     I tried this & not working for me. I am using IE 6.0, framework 3.5, VS2008. Can you let me know what is the prob? I am new.

     

    Monday, December 15, 2008 3:05 PM
  • User783084763 posted

    IE 6 does not support "title" attribute.

    Tuesday, December 16, 2008 2:15 AM
  • User200531505 posted

    Thanks for the reply.

    The problem is, i have ddl with fixed width. the content lenght is more than the ddl width. The user wants to view the full text when he at-least scrolls the mouse over the particular item. how can i achieve it? 

     

    Wednesday, December 17, 2008 11:03 AM
  • User-1187660785 posted

     What you describe is the problem !!

    It works naturally on Firefox but not on IE. So, the intermediary solution is to provide the tooltip full text when the mouse is over the item.

    Wednesday, December 17, 2008 11:12 AM