Setting tooltips for disabled input text boxes in javascript and CSS

Question

I am trying to display a tooltip when you hover over a textbox which has been disabled to indicate why the textbox has been disabled. Setting the title attribute works on IE but doesn't seem to work in Mozilla Firefox. Does anyone know of a simple solution in Javascript and CSS without using JQuery or any other Javascript library.

Answer 1

Title attribute tooltips don't work on disabled form elements. Your best bet is to cover the form element with a div when it is disabled and give the div the title.

Do something like this:

<div style="position:relative;">
    <textarea>My text area</textarea>
    <div id="txtAreaCover" style="position:absolute; width:100%; height:100%; color:transparent; opacity:0; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';  filter:alpha(opacity=0); top:0;left:0; z-index:1; display:none" title="I am disabled.">You will need text in here or IE will not fill the specified width and height. But since we are using opacity:0 and color transparent, it is not visible.</div>
</div>

When you disable the form element change the div#txtAreaCover to be display:block; with JS.