在鼠标悬停于禁用的下拉菜单上显示工具提示

Question

 countLabel() == 0 ? $('#' + uniqueValueee + 'AndOrSelection').prop("disabled", true) : $('#' + uniqueValueee + 'AndOrSelection').prop("disabled", false);

Using the above code I am able to disable the selection of the dropdown. I also want to show a tooltip saying why the dropdown is disabled. For that I have written a function on @onmouseover = "showToolTip(this.id)" on my razor dropdownlist.

function showToolTip(id)
{
    alert(id);
}

If i write the code on other dropdowns which are enabled it works fine. But when the disabled dropdown is mose overed, the js function doesn't fire. Plus in chorome i am also not able to inspect element. Please help.

Answer 1

Try this on your razor view. I tested it and it is working perfectly for both condition (ddl enabled & disabled):

@Html.DropDownListFor(m => m.City, new SelectList(Model.Lookups.Where(x => x.LookupType == "City"),
    "LookupID", "LookupValue"), "---- Select ----", new { disabled= true, @Title= "Tooltip here" })

Please attention to the properties below:

new { disabled= true, @Title= "Tooltip here" }

Then here is the result with enabled and disabled option:

Hope this helps...

Answer 2

Usually, HTML disabled elements do not facilitate any JS events like hover, click, etc. For your purpose, you put a div overlay with higher z-index such that it acts as a disabled area. Then you can define the hover event on the div itself.