Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox does not show tooltips on disabled input fields

Firefox doesn't display tooltips on disabled fields.

The following displays tooltip in IE/Chrome/Safari except Firefox:

<input type="text" disabled="disabled" title="tooltip text."/>

Why doesn't Firefox display tooltip on disabled fields? Is there a work around this?

like image 536
dev.e.loper Avatar asked Jan 09 '10 20:01

dev.e.loper


People also ask

How do I get the tooltip for a disabled field?

By default, tooltips will not be displayed on disabled elements. However, you can enable this behavior by using the following steps: Add a disabled element like the button element into a div whose display style is set to inline-block . Set the pointer event as none for the disabled element (button) through CSS.

How do I inspect tooltip in Firefox?

Step 1: Right-click on the field which produces the tooltip and choose Inspect (or press F12): Step 2: In a PageObject of type LinkType(), create a WebElement for the located tooltip icon: Step 3: In the Test Case, choose the Hover option on UI Action Test Step.


2 Answers

Seems to be a (very old, and very abandoned) bug. See Mozilla Bugs #274626 #436770

I guess this could also be explained as intended behaviour.

One horrible Workaround that comes to mind is to overlap the button with an invisible div with a title attribute using z-index; another to somehow re-activate the button 'onmouseover' but to cleverly intercept and trash any click event on that button.

like image 126
Pekka Avatar answered Oct 02 '22 19:10

Pekka


I guess you are using some frameworks like bootstrap. If so, it add pointer-events: none to the 'disabled' element, so all the mouse events are ignored.

.btn[disabled] {
  pointer-events: auto !important;
}

can fix the problem.

like image 32
Cam Song Avatar answered Oct 02 '22 20:10

Cam Song