javascriptasp.net-mvchtml.dropdownlistforonmouseover

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.


Solution

  • 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