web-dev-qa-db-fra.com

Comment rendre une info-bulle sur un bouton HTML désactivé

J'ai un bouton HTML. J'ai essayé de rendre une info-bulle sur celle-ci en fonction de l'attribut "title" du bouton et il ne s'affiche pas. Principalement parce qu'il est désactivé.

J'ai ensuite essayé d'envelopper le bouton dans un intervalle et de définir l'attribut "title" de l'intervalle.

Le survol du bouton qui est enveloppé dans la plage n'a toujours aucun effet. L'infobulle s'affichera sur toute autre partie de la plage qui ne fait pas partie de la balise du bouton. Comme si je mettais du texte dans la plage ainsi que le bouton, le survol du texte produit l'infobulle, mais si vous survolez le bouton, il ne sera pas rendu.

Alors: comment afficher une info-bulle pour un bouton désactivé?

htmlbuttontooltip
52
angryITguy

Une solution idéale serait compatible avec tous les navigateurs, et cette suggestion ne l'est pas; Je ne l'ai testé que sur Ubuntu 9.10, bien qu'avec Chrome, Firefox, Epiphany et Opera et il semble fonctionner de manière fiable dans ceux-ci, ce qui implique la fiabilité de leurs homologues Windows. Évidemment IE est une marmite de poisson entièrement différente.

Cela étant dit:

Cette idée est basée sur le (x) html suivant:

<form>
    <fieldset>
        <button disabled title="this is disabled">disabled button</button>
    </fieldset>    
</form>

Et utilise le CSS suivant pour atteindre quelque chose proche de votre objectif:

button  {
    position: relative;
}

button:hover:after {
    position: absolute;
    top: 0;
    left: 75%;
    width: 100%;
    content: attr(title);
    background-color: #ffa;
    color: #000;
    line-height: 1.4em;
    border: 1px solid #000;
}

button {
  position: relative;
  box-sizing: border-box;
}
button:hover:after {
  position: absolute;
  top: 0;
  left: 75%;
  width: 100%;
  content: attr(title);
  background-color: #ffa;
  color: #000;
  line-height: 1.4em;
  border: 1px solid #000;
  box-shadow: 2px 2px 10px #999;
}
<form>

  <fieldset>

    <button disabled title="this is disabled">disabled button</button>

  </fieldset>

</form>

Ce n'est pas idéal, mais c'était la meilleure idée non JavaScript que j'ai pu trouver.

12
David Thomas

J'ai obtenu ce travail en appliquant le CSS pointer-events: auto; au bouton, bien que cela ne soit pas pris en charge sur IE <11.

31
Andrew Magee

Il s'agit d'un bogue dans Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626

5
icedtoast

N'utilisez pas désactivé. Utilisez plutôt "lecture seule"!

0
Martin Dimitrov