Définition d'info-bulles pour les zones de saisie désactivées en javascript et CSS

Question

J'essaie d'afficher une info-bulle lorsque vous passez la souris sur une zone de texte qui a été désactivée pour indiquer pourquoi la zone de texte a été désactivée. La définition de l'attribut title fonctionne sur IE mais ne semble pas fonctionner dans Mozilla Firefox. Est-ce que quelqu'un connaît une solution simple en Javascript et CSS sans utiliser JQuery ou toute autre bibliothèque Javascript.

Answer 1

Les info-bulles d'attribut de titre ne fonctionnent pas sur les éléments de formulaire désactivés. Votre meilleur pari est de couvrir l'élément de formulaire avec un div quand il est désactivé et donne le div le titre.

Faire quelque chose comme ceci:

<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> 

Lorsque vous désactivez l'élément de forme modifier la div # txtAreaCover être display: block; avec JS.