从 XML 列表填充的 ASP 下拉列表如何添加工具提示

Question

请帮忙我做错了什么？

我有一个 xml 国家/地区列表，格式为

 <COUNTRY value="blah" title="blah">blah blah</COUNTRY>

我有一个从广泛的 xml 列表填充的 asp 下拉列表，下拉列表 html 格式为：

<asp:DropDownList ID="mCOUNTRY" runat="server" Width="205"      onmouseover="showHideTooltip()"> </asp:DropDownList>

-----显示隐藏工具提示（） 下面的-----

<script language="JavaScript">
function showHideTooltip() 
{
var obj = document.getElementById("mCOUNTRY");
obj.title[obj.selectedIndex].title;
}
</SCRIPT>
</CODE> 

Answer 1

将鼠标悬停在事件上时显示工具提示下拉列表项，使用 C# 示例通过将鼠标悬停在事件上 Asp.net 下拉列表中使用工具提示，使用 C# 的示例：http://asp-net-by-parijat.blogspot.in/2014/08/show-tooltip-dropdownlist-items-by.html

Answer 2

你可能想看看这篇文章 显示/隐藏工具提示 使用jQuery，你可以从这个SO答案或这个SO答案中改编

我认为你需要做这样的事情：

<div id="tooltip" style="display:none;">Content will go here</div>
<asp:DropDownList ID="mCOUNTRY" runat="server" Width="205" 
onmouseover="showTooltip()" onmouseout="hide()"> </asp:DropDownList>

有了这个 JavaScript

<script language="JavaScript">
function showTooltip() {
  var obj = document.getElementById("mCOUNTRY");
  var title = obj.title[obj.selectedIndex].title;
  var tooltip = document.getElementById("tooltip");
  tooltip.innerHtml = title;
  tooltip.style.visibility = 'visible';
  tooltip.style.left = event.screenX + 'px';
  tooltip.style.top = event.screenY + 'px';
}
function hideTooltip(){
  document.getElementById("tooltip").style.visibility = 'hidden';
}
</script>

一个jQuery解决方案（如上所述会更优雅）