Show tooltip for disabled items

Question

I have a div with disabled items. I am using jquery ui to display tool tip. Tool tip is shown for enabled items but not for disabled div. How can I show tooltip for disabled div also? Here is my fiddle

<div title="This is a tool tip test for enabled item" id="divEnabled">
    item is enabled
</div>

<div title="This is a tool tip test for disabled item" id="divDisabled">
    item is disabled
</div>


#divDisabled{
     opacity: 0.2;
    pointer-events: none;
}

Answer 1

Remove the pointer-events: none; to make it work.

Answer 2

You are setting pointer events to none so the hover event is not fired. Thats why title is not shown. Maybe you should find another way to "disable" the div.

If you just want to stop click event on the div

<div title="This is a tool tip test for disabled item" id="divDisabled" onclick="return false;">
    item is disabled
</div>

would do.

But normally it is useless to click on a div so maybe you would explain what are you doing on click of the div and preventing this action would be different.

Answer 3

I tried this and it worked

Worked code

$("#divDisabled *").attr("disabled", "disabled").off('click');