Question

嗨我有一个DropDownList来自后面的代码。如何使用DataTextField作为DropDownList的工具提示？

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

我希望有界域DisplayString也在工具提示中有界限。如果不使用DropDownList的DataBound事件，这是否可行？

Answer 1

只需在下拉列表绑定后调用该函数：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);
    }
}

Answer 2

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

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

Answer 3

下面的代码可行，需要在Page Load中调用此方法并将下拉列表传递给您想要工具提示的方法

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

以下是实际方法：

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

Answer 4

有一些javascript工作，很有可能。

首先，使用鼠标输出事件在html端创建一个div

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

然后需要一些javascript工作来确保您将鼠标悬停在dropdownlist项目时显示工具提示

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

最后一部分是将鼠标悬停事件添加到您的下拉列表

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

然后它应该工作。您可能需要为工具提示添加额外的样式。
希望这有助于我的Myra

Answer 5

以下是我目前使用的3个示例示例！首先使用标准选择。其次使用Asp.net Dropdownlist和外部数据源。第3个最简单，在下拉（选择）点击事件时使用jQuery动态添加工具提示（标题属性）。

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>

使用一点jQuery：

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

});
})

2）。 / * For Asp DropDown（Dropdownlist）从数据库中填充值！* /

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

另一种从另一个Js函数绑定Tooltip的方法，而不是页面加载 ....只需致电

addToolTipToDropDown($('#DropPlaceofInsert'));

...

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

3）或者甚至更容易添加以下代码，就是这样！：

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

- 希望这有助于为一些开发人员节省时间！

使用ToolTip绑定DropDownList

5 个答案: