在div中的Dropdownlist显示onmouseover工具提示 [英] Dropdownlist inside div to show onmouseover tooltip
问题描述
以下代码针对div的onmouseover，当我第一次将鼠标移到div元素上时没有显示工具提示，但是如果我点击某处并带上鼠标并显示工具提示。不确定我做错了什么？有没有适当的方式显示工具提示只读内部的下拉列表？
DropDown.ascx
< div style =z-index：99; position：relative; padding：1px; onmouseover =this.title =<％= ddl.ClientID％> .options [<％= ddl.ClientID％> .selectedIndex] .text>
< asp：DropDownList ID =ddlrunat =serverCssClass =etms-dropdown-widthstyle =position：relative; z-index：-1;>
< / asp：DropDownList>
< / div>
DropDown.ascx.cs
protected void Page_Load（object sender，EventArgs e）
{
if（！IsPostBack）
{
.. ..
this.ddl.Attributes [onmouseover] =this.title = this.options [this.selectedIndex] .text;
foreach（this.ddl.Items中的ListItem项）
{
item.Attributes [title] = item.Text;
}
this.ddl.DataBind（）;
}
else
{
this.ddl.Attributes [onmouseover] =this.title = this.options [this.selectedIndex] .text ;
foreach（this.ddl.Items中的ListItem项）
{
item.Attributes [title] = item.Text;
HTML方法
由于您想为只读显示标题（例如 Enabled = false ）DropDownList我相信没有理由使用任何JavaScript，并坚持纯HTML。
请参阅以下示例：
< div title = <％= DropDownList2.SelectedItem.Text％>>
< asp：DropDownList ID =DropDownList2runat =serverEnabled =false>
< asp：ListItem Value =1Text =Disabled item 1>< / asp：ListItem>
< asp：ListItem Value =2Text =Disabled item 2>< / asp：ListItem>
< asp：ListItem Value =3Text =Disabled item 3>< / asp：ListItem>
< / asp：DropDownList>
< / div>
我在所有浏览器（Firefox 32，IE 11，Chrome 37，Opera 24）没有问题的作品。
JavaScript方法
另一方面，如果您需要JavaScript / jQuery方法，您可以使用下面的例子。在div上的 mouseover 事件中，DropDownList被暂时启用以获取其值，然后再次禁用它。一旦检索到值， div 的标题属性就会改变。
div有一些填充是非常重要的，以便光标悬停在div上并最终触发事件。
HTML：
< div class =dynamictooliptitle = 标题 >
< asp：DropDownList ID =DropDownList3runat =serverEnabled =false>
< asp：ListItem Value =1Text =Disabled item 1>< / asp：ListItem>
< asp：ListItem Value =2Text =Disabled item 2>< / asp：ListItem>
< asp：ListItem Value =3Text =Disabled item 3>< / asp：ListItem>
< / asp：DropDownList>
< / div>
CSS：
.dynamictoolip {
display：inline-block;
padding：4px;
JavaScript：
<$ （）。
var jThis = jQuery（this）;
var jDdl = jThis.find（'select' ）;
var value = jDdl.find（option：selected）。text（）;
if（jDdl.prop（'disabled'））{
jDdl。 removeAttr（'disabled'）;
jDdl.attr（'disabled'，'disabled'）;
jThis.attr（'title'，value）;
}
else {
jThis.attr（'title'，value）;
}
}）;
注意：我在这里注意到的一个问题是，如果用户移动光标太快， mouseover 事件未被触发。我也尝试过使用 mouseenter 和 mouseout 事件（并尝试使用普通JavaScript而不使用jQuery）没有任何区别。
$ b
根据最新评论编辑
虽然您的< asp：DropDownList> 将处于禁用和启用状态，工具提示应始终保留在父元素上。
我们唯一需要做的就是当< asp：DropDownList> 改变它的值时，也可以改变父元素的code> title 属性，这可以通过一些JavaScript来完成。
在下面的代码中，我添加了一个简单的链接来启用< asp：DropDownList> 。此外，这里是一个jsfiddle的代码。
HTML
< div>
简单ddl 2：
< span title =<％= DropDownList2.SelectedItem.Text％>>
< asp：DropDownList ID =DropDownList2runat =serverCssClass =ddl2Enabled =false>
< asp：ListItem Value =1Text =Disabled item 1>< / asp：ListItem>
< asp：ListItem Value =2Text =Disabled item 2>< / asp：ListItem>
< asp：ListItem Value =3Text =Disabled item 3>< / asp：ListItem>
< / asp：DropDownList>
< / span>
< a href =＃class =edit_ddl2>编辑< / a>
< / div>
JavaScript
jQuery（'。edit_ddl2'）。click（function（）{
jQuery（'。ddl2'）。prop（'disabled'，false）;
return false;
}）;
jQuery（'。ddl2'）。change（function（）{
var jThis = jQuery（this）;
jThis.parent（）。attr（'title'，jThis.find（ option：selected）。text（））;
jThis.prop（'disabled'，true）; //如果您希望元素保持启用状态，则删除此行
}）;
The following code for onmouseover for the div, not showing tooltip when I first move mouse over the div element, but if I click somewhere and bring the mouse and it shows tooltip. Not sure i'm doing anything incorrectly? is there proper way to show tooltip for READ ONLY dropdownlist inside the div?
DropDown.ascx
<div style="z-index:99;position:relative;padding:1px;" onmouseover="this.title=<%= ddl.ClientID %>.options[<%= ddl.ClientID %>.selectedIndex].text">
<asp:DropDownList ID="ddl" runat="server" CssClass="etms-dropdown-width" style="position:relative;z-index:-1;">
</asp:DropDownList>
</div>
DropDown.ascx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
....
this.ddl.Attributes["onmouseover"] = "this.title=this.options[this.selectedIndex].text";
foreach (ListItem item in this.ddl.Items)
{
item.Attributes["title"] = item.Text;
}
this.ddl.DataBind();
}
else
{
this.ddl.Attributes["onmouseover"] = "this.title=this.options[this.selectedIndex].text";
foreach (ListItem item in this.ddl.Items)
{
item.Attributes["title"] = item.Text;
}
}
}
HTML approach
Since you want to display a title for a read-only (e.g. Enabled=false) DropDownList I believe that there is no reason to use any JavaScript at all and stick to plain HTML.
See the following example:
<div title="<%=DropDownList2.SelectedItem.Text %>">
<asp:DropDownList ID="DropDownList2" runat="server" Enabled="false">
<asp:ListItem Value="1" Text="Disabled item 1"></asp:ListItem>
<asp:ListItem Value="2" Text="Disabled item 2"></asp:ListItem>
<asp:ListItem Value="3" Text="Disabled item 3"></asp:ListItem>
</asp:DropDownList>
</div>
I tested it in all browsers (Firefox 32, IE 11, Chrome 37, Opera 24) and it works with no issues.
JavaScript approach
If, on the other hand, you need a JavaScript / jQuery approach you could use the following example. In the mouseover event on the div the DropDownList is temporary enabled to get its value and then disable it again. Once the value is retrieved, the title attribute of the div is changed.
It is important that the div has some padding so that the cursor will hover over the div and eventually the event will be triggered.
HTML:
<div class="dynamictoolip" title="title">
<asp:DropDownList ID="DropDownList3" runat="server" Enabled="false">
<asp:ListItem Value="1" Text="Disabled item 1"></asp:ListItem>
<asp:ListItem Value="2" Text="Disabled item 2"></asp:ListItem>
<asp:ListItem Value="3" Text="Disabled item 3"></asp:ListItem>
</asp:DropDownList>
</div>
CSS:
.dynamictoolip {
display:inline-block;
padding:4px;
}
JavaScript:
jQuery('.dynamictoolip').mouseover(function () {
var jThis = jQuery(this);
var jDdl = jThis.find('select');
var value = jDdl.find("option:selected").text();
if (jDdl.prop('disabled')) {
jDdl.removeAttr('disabled');
jDdl.attr('disabled', 'disabled');
jThis.attr('title', value);
}
else {
jThis.attr('title', value);
}
});
Note: One issue I noticed here is that if the user moves the cursor too fast the mouseover event is not triggered. I also tried it with the mouseenter and mouseout events (and also tried plain JavaScript and no jQuery) but it didn't make any difference.
Edit based on latest comments
Although your <asp:DropDownList> will be in both disabled and enabled state, the tooltip should always remain on the parent element.
The only thing we need to do is when the <asp:DropDownList> changes its value, the title attribute of the parent element to change also, that can be accomplished with a bit of JavaScript.
In the following code snipped I added a simple link to enable the <asp:DropDownList>. Also, here is a jsfiddle with the code.
HTML
<div>
simple ddl 2:
<span title="<%=DropDownList2.SelectedItem.Text %>">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="ddl2" Enabled="false">
<asp:ListItem Value="1" Text="Disabled item 1"></asp:ListItem>
<asp:ListItem Value="2" Text="Disabled item 2"></asp:ListItem>
<asp:ListItem Value="3" Text="Disabled item 3"></asp:ListItem>
</asp:DropDownList>
</span>
<a href="#" class="edit_ddl2">edit</a>
</div>
JavaScript
jQuery('.edit_ddl2').click(function () {
jQuery('.ddl2').prop('disabled', false);
return false;
});
jQuery('.ddl2').change(function () {
var jThis = jQuery(this);
jThis.parent().attr('title', jThis.find("option:selected").text());
jThis.prop('disabled', true); // remove this line if you want the element to stay enabled
});
这篇关于在div中的Dropdownlist显示onmouseover工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
