1. ホーム
  2. jquery

[解決済み] HTMLのoptionタグにtooltipを表示するには?

2023-06-18 01:59:05

質問

HTMLやjQueryを使ったJavaScriptで、どのように個々の <option> 要素にツールチップを表示し、決定プロセスを支援することができます ( には十分なスペースがなく、別の種類のコントロールが必要であり、何らかの支援が必要です。 ).

これは、プラグインかそれに類するものでできるのでしょうか?

jQueryのtooltipプラグインをいくつか試しましたが、成功しませんでした(Tooltipと呼ばれるものを含む)。

この解決策では

  • IE、WebKit および Gecko で動作します。
  • 標準的な <select> ラップ <option> 要素で構成されています。

したがって、ソリューションが他のタグを使用したい場合は、それらの要素を必要なものに動的に変換する必要があります(そして、最初のマークアップが何か異なることを期待しないでください)。


このためのコードは次のとおりです。 ここで で、SafeSurf セクションの下にあり、選択肢のロールオーバー時に選択肢の意味についてヘルプを表示したいと思います。現在、それは事後的にしか表示できず、ユーザーのためのいくつかの事前ヘルプは有益でしょう。

これは簡単ではなく、おそらく何かを作成する必要があることを認めます。したがって、懸賞金は、最も完全なソリューション、または私が作成できるソリューションに最も近い場所にある特定のフックに授与されます。

どのように解決するのですか?

これが質問されてから 2 年の間に、他のブラウザが追いついたようです (少なくとも Windows では......他はわかりません)。option タグに "title" 属性を設定することができます。

<option value="" title="Tooltip">Some option</option>

これは、Windows 7 上の Chrome 20、IE 9 (およびその 8 と 7 モード)、Firefox 3.6、RockMelt 16 (Chromium ベース) ですべて動作しました。