CODEWITHSUNDEEP
javascriptasp.net-mvchtml.dropdownlistforonmouseover
user2998990
user2998990

Reputation: 980

Show tooltip on mouseover of a disabled dropdown

 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.

Upvotes: 1

Views: 2633

Answers (2)

Murat Yıldız
Murat Yıldız

Reputation: 12070

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:

enter image description here

Upvotes: 1

ArinCool
ArinCool

Reputation: 1738

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.

Upvotes: 0

Related Questions