web-dev-qa-db-ja.com

無効なHTMLボタンにツールチップをどのようにレンダリングしますか

HTMLボタンがあります。ボタンの「title」属性に基づいてツールチップをレンダリングしようとしましたが、レンダリングされません。主に無効になっているためです。

次に、ボタンをスパンでラップして、スパンの「title」属性を設定してみました。

スパンにラップされているボタンにカーソルを合わせても効果はありません。ツールチップは、ボタンタグの一部ではないスパンの他の部分にレンダリングされます。ボタンと同様にスパンにテキストを配置した場合と同様に、テキストにカーソルを合わせるとツールチップが表示されますが、ボタンにカーソルを合わせるとレンダリングされません。

だから：どのようにして無効なボタンのツールチップを表示できますか？

htmlbuttontooltip
52
angryITguy

理想的な解決策はブラウザ間の互換性があるでしょう、そしてこの提案はそうではありません。私はそれをUbuntu 9.10でのみテストしましたが、Chrome、Firefox、Epiphany、およびOperaで動作し、Windowsでの信頼性を意味します。明らかにIEは、まったく異なる魚のやかんです。

言われていること：

このアイデアは、次の（x）htmlに基づいています。

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

また、次のCSSを使用して、目的に近いものを実現します。

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>

それは理想的ではありませんが、私が思いつくことができる最高の非JavaScriptのアイデアでした。

12
David Thomas

CSSを適用してこれを機能させましたpointer-events: auto;をボタンに追加しますが、IE <11ではサポートされていません。

31
Andrew Magee

これはFirefoxのバグです： https://bugzilla.mozilla.org/show_bug.cgi?id=274626

5
icedtoast

無効にしないでください。代わりに「読み取り専用」を使用してください！

0
Martin Dimitrov