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.

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

Hi,

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

Grz, Kris.

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

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

 

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?

 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.

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.

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

             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

 

 

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="position:absolute;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>

 

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;
         }
    }
}

AdventurGurl:

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.

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.

 

IE 6 does not support "title" attribute.