HTML方法

Question

以下代码用于div的onmouseover，当我第一次将鼠标移到div元素上时没有显示工具提示，但如果我点击某处并带上鼠标并显示工具提示。不确定我做错了什么？有没有正确的方法来显示div内的READ ONLY下拉列表的工具提示？

enter image description here

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

Answer 1

问题是您在下拉列表中使用否定z-index。如果您删除了否定z-index，我会测试所有内容并且正在运行。

负z索引禁用鼠标交互。使用大于或等于0的z索引可以实现鼠标交互。

source

Answer 2

HTML方法

由于您想要显示只读（例如Enabled=false）DropDownList的标题，我相信没有理由使用任何JavaScript并坚持使用纯HTML。

请参阅以下示例：

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

我在所有浏览器（Firefox 32，IE 11，Chrome 37，Opera 24）中测试过，它没有任何问题。

JavaScript方法

另一方面，如果您需要JavaScript / jQuery方法，则可以使用以下示例。在div上的mouseover事件中，DropDownList临时启用以获取其值，然后再次禁用它。检索到该值后，title的{{1}}属性会发生变化。

重要的是div有一些填充，以便光标悬停在div上，最终将触发事件。

HTML：

div

CSS：

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

JavaScript的：

.dynamictoolip {
    display:inline-block;
    padding:4px;
}

注意：我在这里注意到的一个问题是，如果用户移动光标太快，则不会触发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); } });事件。我也尝试了mouseover和mouseenter事件（并尝试过普通的JavaScript和没有jQuery），但它没有任何区别。

根据最新评论进行编辑

虽然您的mouseout处于禁用和启用状态，但工具提示应始终保留在父元素上。

我们唯一需要做的就是当<asp:DropDownList>更改其值时，父元素的<asp:DropDownList>属性也会更改，这可以通过一点JavaScript来完成。

在以下代码中，我添加了一个简单的链接以启用title。此外，here是代码的jsfiddle。

HTML

<asp:DropDownList>

的JavaScript

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

Answer 3

由于您需要显示禁用控件的工具提示，这可能对某些浏览器不起作用。你需要使用JS来控制它。来源 - Tooltip is not displayed for a disabled html button in mozilla firefox

您可以添加简单的javascript来设置文档加载的标题/工具提示。

<body onload="SetAttr()">

假设父DIV的id = dvDDL，例如 - <div style="z-index:99; id='dvDDL' .. />

<script> function SetAttr() { document.getElementById('dvDDL').setAttribute('title','<%= ddl.ClientID %>.options[<%= ddl.ClientID %>.selectedIndex].text'); } </script>

Answer 4

你不需要javascript鼠标悬停的东西。当用户将鼠标悬停在div上时，以下内容足以显示工具提示：

<div title="this is a tooltip"></div>

因此，您需要在页面加载时初始设置此值。为此，请为div指定一个id并设置runat = server，以便您可以在服务器上访问其属性：

<div runat="server" id="tooltip"></div>

然后在你的代码中，当页面加载时，设置title属性：

this.tooltip.Attributes["title"] = this.ddl.SelectedValue

如果您正在使用：

AutoPostBack=true

你完成了。但是，如果您没有使用AutoPostBack，并且您希望在用户更改所选值时动态更改工具提示，则需要一些javascript，但将其放在下拉列表的onChange事件中。这样你知道下拉将在调用时始终启用（否则它们将如何改变任何东西）。再次在你的代码背后，你可以做这样的事情：

ddl.Attributes["onChange"] = "document.getElementById('" + div.ClientID "').title=this.options[this.selectedIndex].text";

Answer 5

使用JavaScript的简单解决方案就是这样做..

$(element).bind("mouseover", function () {

    if ($(element)[0])
    {
        $(element)[0].title = $(element)[0].options[$(element)[0].selectedIndex].text;
    }       

});

Answer 6

尝试使用JQuery，javascript很难处理动态内容或多个浏览器支持。

变化：

this.title = this.options[this.selectedIndex].text

要：

$(this).attr('title', $(this).find('option:selected').text());

div内的dropdownlist显示onmouseover工具提示

6 个答案:

HTML方法

JavaScript方法

根据最新评论进行编辑