Show tooltip on mouseover of a disabled dropdown

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: