帶有工具提示的綁定DropDownList

嗨，我有一個DropDownList背後的代碼。我如何使用DataTextField作爲DropDownList的工具提示？帶有工具提示的綁定DropDownList

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

我希望有界的字段DisplayString也限制在工具提示中。這可能沒有使用DropDownList的事件DataBound？

來源

2010-10-21 rob waminal

只需調用該功能後，下拉列表綁定：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); 
    } 
}

來源

2010-12-30 10:18:26

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

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

來源

2010-10-21 06:35:19 Geeth

很好用一些JavaScript的工作，這是完全可能的。

首先創建你的HTML側內一個div鼠標移出事件

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

然後一些JavaScript的工作要求，以確保你的，當你懸停在您下拉列表項目它顯示一個提示

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

然後它應該工作。您可能需要爲您的工具提示添加額外的樣式。
希望這有助於
邁拉

來源

2010-10-21 06:45:31 Myra

接近，但我想爲每個列表項提供工具提示，而不僅僅是選定的項目。 – 2010-10-21 07:23:38

同樣的事情也可以在懸停效果上實現 – Myra 2010-10-21 07:46:22

這裏是我目前使用的3名的例子！首先使用標準選擇。第二次將Asp.net Dropdownlist與外部數據源一起使用。第三種最簡單的方法是，在下拉（選擇）單擊事件中動態使用jQuery添加工具提示（title屬性）。

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）。 /*爲ASP下拉（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函數，而不是在頁面加載綁定工具提示另一種方法....只是調用

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

- 希望這有助於節省時間，一些開發商！

來源

2012-01-17 14:17:48 NotForFun

下面的代碼將工作，需要調用pageLoad的這種方法，並且下拉列表傳遞給您想要工具提示

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

來源

2014-08-19 20:21:59

帶有工具提示的綁定DropDownList

回答

相關問題