Dropdownlist inside div to show onmouseover tooltip

Question

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

Answer 1

The problem is that you use negative z-index in your dropdown list. I test everything and is working if you remove negative z-index.

Negative z-indexes disable mouse interaction. Using z-indexes greater than or equal to 0 enables mouse interaction.

source

Answer 2

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

Answer 3

Since you need to show tooltip for disabled control, that might not work for some browsers. You need to control that using JS. SOURCE- Tooltip is not displayed for a disabled html button in mozilla firefox

You can add simple javascript to set title/tooltip on document load.

<body onload="SetAttr()">

Assuming parent DIV has id = dvDDL, like - <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

You dont need the javascript mouseover stuff. The following is enough to have a tooltip appear when a user hovers over a div:

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

So, you need to initially set this value on page load. To do this, give the div an id and set runat=server so that you can access its attributes on the server:

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

Then in your code behind, when the page loads, set the title attribute:

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

If you are using:

AutoPostBack=true

You are done. But if you are not using AutoPostBack and you want the tooltip to change dynamically when the user changes the selected value, you need a little javascript, but put it on the onChange event of your dropdown list. That way you know the dropdown will always be enabled when it is called (otherwise how would they have changed anything). so again in your code behind, you could do something like this:

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

Answer 5

A simple solution using JavaScript would be to do this..

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

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

});

Answer 6

Try just using JQuery, javascript has a hard time dealing with dynamic content, or multiple browser support.

Change:

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

To:

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