Binded DropDownList with ToolTip

Hi I have a DropDownList bound开发者_运维百科ed from the code behind. How can I use the DataTextField as a ToolTip of the DropDownList?

DropDownList list = this.DropDownList1;
list.DataSource = GetData();
list.DataTextField = "DisplayString";
list.DataValueField = "DataValue";
list.DataBind();

I want the bounded Field DisplayString to bounded also in the ToolTip. Is this possible without using the DataBound event of the DropDownList?

Simply call that function after dropdown list binding: BindTooltip(Name of the dropdownlist);

public void BindTooltip(ListControl lc)
{
    for (int i = 0; i < lc.Items.Count; i++)
    {
        lc.Items[i].Attributes.Add("title", lc.Items[i].Text);
    }
}

http://www.codeproject.com/KB/aspnet/List_Box_Tool_Tip.aspx

http://www.dotnetspider.com/resources/5099-Tool-tip-for-DropDownList-ASP-NET.aspx

Below code will work, need to call this method in PageLoad and pass the dropdown list to the method for which you want tooltip

 protected void Page_Load(object sender, EventArgs e)
 {
    BindToolTip(ddlProjects);
}

Below is the actual method:

private void BindToolTip(ListControl list)
{
    foreach (ListItem item in list.Items)
    {
        item.Attributes.Add("title", item.Text);
    }
}

Well with some javascript work,it's quite possible.

First you create a div inside your html side with mouse out event

<div id="tooltip" style="display:none;" onmouseout="hidetooltip();"></div>

then some javascript work is required to insure your when you hover you dropdownlist item it shows a tooltip

function showtooltip(element) {
   //select focused elements content to show in tooltip content
   document.getElementById("tooltip").innerHTML = 
          element.options[element.selectedIndex].text;
   //show tooltip
   document.getElementById("tooltip").style.display = "block";
}

function hidetooltip() {
   //hide tooltip
   document.getElementById("tooltip").style.display = "none";
}

The last part is adding mouse over and out event to your dropdownlist

<asp:DropDownList ... onmouseover="showtooltip(this)" 
                      onmouseout="hidetooltip()" ... >

Then it should work.You may need to add extra style for your tooltip.
Hope this helps
Myra

Here are 3 sample examples I am currently using! First using standard Select. Second using Asp.net Dropdownlist with an external datasource. 3rd simplest, add tooltip (title attribute) dynamically using jQuery on dropdown (select) click event.

1)

  <select id="testTitleDrop">
   <option value="1">Tea</option>
   <option value="2">Coffee</option>
   <option value="3">Chocolate</option>
   <option value="4">IceTea</option>
</select>

using a bit of jQuery:

$(document).ready(function () {
 $('#testTitleDrop').find("option:[title='']").each(function () {
 $(this).attr("title",$(this).text());

});
})

2). /* For Asp DropDown (Dropdownlist) Populating values from database!*/

<asp:DropDownList runat="server" 
DataSourceID="SqlDataSource1" 
AutoPostBack="true" 
ToolTip=""  
DataTextField="SectionName"
DataValueField="SectionID"
ID="DropPlaceofInsert"
AppendDataBoundItems="true"  onselectedindexchanged="DropPlaceofInsert_SelectedIndexChanged"  >
     <asp:ListItem Text="" Value="-1" Selected="True" />
</asp:DropDownList>
<%--DataSource --%>            
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:RegistryConnectionString %>" 
  SelectCommand="SELECT * FROM [Section] where rtrim(ltrim(sectionname)) <> ''    ORDER BY [SectionName]">
</asp:SqlDataSource>

Another method to bind Tooltip from another Js function instead on page load ....just call

addToolTipToDropDown($('#DropPlaceofInsert'));

...

function addToolTipToDropDown(el)
 {
     $(el).find("option:[title='']").each(function () {
           $(this).attr("title",$(this).text());
        });  
 }

3) Or even easier just add the following code and that's it !:

// Assign Tooltip value on click of dropdown list  //    
  $(document).ready(function () {
    try{  
     $('select').click(function (el) {    
         $(this).find("option:[title='']").each(function (el) {       
                                   $(this).attr("title",$(this).text());
         })                
      });
    }
    catch(e)
{
    alert(e);
}

-- Hope this helps save time to some developers !