web-dev-qa-db-ja.com

HTMLの「オプション」タグにツールチップを表示するにはどうすればよいですか？

プレーンHTMLまたはjQueryを使用したJavaScriptを使用して、個々のツールチップをどのように表示しますか<option>決定プロセスを支援する要素（異なる種類の制御のための十分なスペースがなく、いくらかの助けが必要です）。

プラグインなどでこれを実行できますか？

JQueryのツールチッププラグインをいくつか試してみましたが、成功しませんでした（Tooltipと呼ばれるものを含む）。

このソリューションは：

  • iE、WebKit、Geckoで動作します。
  • 標準の<select>ラップ<option>要素。

そのため、ソリューションが他のタグを使用する場合は、それらの要素を動的に必要なものに変換する必要があります（初期マークアップが異なるとは予想しません）。

このコードは here にあります。これはSafeSurfセクションの下にあり、選択肢の意味に関するオプションのロールオーバーに関するヘルプを表示します。現時点では、「事後」にのみ表示でき、ユーザーに対する事前のヘルプが役立つ場合があります。

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

jqueryhtmljquery-pluginstooltip
61
Metalshark

これが尋ねられてから2年で、他のブラウザが追いついたようです（少なくともWindowsでは...他の人についてはわかりません）。オプションタグに「タイトル」属性を設定できます。

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

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

88
Jack.R.Abbit

表示されるオプションの数を増やすことができる場合、次の方法が有効です。

<html>
    <head>
        <title>Select Option Tooltip Test</title>
        <script>
            function showIETooltip(e){
                if(!e){var e = window.event;}
                var obj = e.srcElement;
                var objHeight = obj.offsetHeight;
                var optionCount = obj.options.length;
                var eX = e.offsetX;
                var eY = e.offsetY;

                //vertical position within select will roughly give the moused over option...
                var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount));

                var tooltip = document.getElementById('dvDiv');
                tooltip.innerHTML = obj.options[hoverOptionIndex].title;

                mouseX=e.pageX?e.pageX:e.clientX;
                mouseY=e.pageY?e.pageY:e.clientY;

                tooltip.style.left=mouseX+10;
                tooltip.style.top=mouseY;

                tooltip.style.display = 'block';

                var frm = document.getElementById("frm");
                frm.style.left = tooltip.style.left;
                frm.style.top = tooltip.style.top;
                frm.style.height = tooltip.offsetHeight;
                frm.style.width = tooltip.offsetWidth;
                frm.style.display = "block";
            }
            function hideIETooltip(e){
                var tooltip = document.getElementById('dvDiv');
                var iFrm = document.getElementById('frm');
                tooltip.innerHTML = '';
                tooltip.style.display = 'none';
                iFrm.style.display = 'none';
            }
        </script>
    </head>
    <body>
        <select onmousemove="showIETooltip();" onmouseout="hideIETooltip();" size="10">
            <option title="Option #1" value="1">Option #1</option>
            <option title="Option #2" value="2">Option #2</option>
            <option title="Option #3" value="3">Option #3</option>
            <option title="Option #4" value="4">Option #4</option>
            <option title="Option #5" value="5">Option #5</option>
            <option title="Option #6" value="6">Option #6</option>
            <option title="Option #7" value="7">Option #7</option>
            <option title="Option #8" value="8">Option #8</option>
            <option title="Option #9" value="9">Option #9</option>
            <option title="Option #10" value="10">Option #10</option>
        </select>
        <div id="dvDiv" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;z-index:999;"></div>
        <iframe id="frm" style="display:none;position:absolute;z-index:998"></iframe>
    </body>
</html>
10
pferate

私はChromeでこれを試しました：

var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});

ただし、ホバーエンターは起動しません。したがって、標準選択を使用してこれを行うことはできません。ただし、いくつかの非標準的な方法でこれを実現できます。

  • ドロップダウンのように見えるラジオボックスを使用して、選択ボックスを偽造できます。そのため、たとえば、ラジオボックスを絶対位置に配置し、オプションになりすましたスタイルのボックスの上に不透明度を0に設定します。
  • または、純粋なjavascriptを使用して一連のボックスを作成し、javascript onclickイベントを追加してDropboxを自分で再作成できます。したがって、javascriptを使用してクリックされたボックスで非表示の値を更新します。
  • または、すでに存在する非標準ライブラリのいずれかを使用します。 （もしあれば？）
4
balupton

これがすべてのブラウザで可能になるとは思わない。

W3Schoolsは、すべてのブラウザーに オプションイベント が存在することを報告しますが、セットアップ後は このテストデモ になります。 Firefoxでしか動作しない（ChromeまたはIEではない）、他のブラウザではテストしていません。

Firefoxではmouseenterとmouseleaveも使用できますが、これはw3schoolsページでは報告されていません。

更新：正直なところ、提供されたサンプルコードを見ると、選択ボックスさえ使用しません。 slider で見栄えが良くなると思います。 デモを更新しました 。評価オブジェクト（レベル番号を追加）とセーフサーフタブにいくつかの小さな変更を加える必要がありました。しかし、他のほとんどすべてをそのまま残しました。

3
Mottie

少なくともfirefoxでは、オプションタグに「title」属性を設定できます。

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

3
Zaahid

なぜドロップダウンを使用するのですか？ユーザーが説明テキストを見る唯一の方法は、オプションの1つに盲目的にホバーすることです。

ラジオボタングループを使用し、各アイテムの横に、追加情報を示すツールチップアイコンを配置し、選択後に表示することをお勧めします（現在のように）。

私はこれがあなたの問題を正確に解決するわけではないことを理解していますが、そもそもより適切なものを使用することができたときに、その柔軟性が悪かったとして悪名高いhtml要素と戦うことに意味がありません。

2
Chris Fletcher

標準の<select>要素でこの機能を実現できるとは思わない。

私が提案するのは、そのような方法を使用することです。

http://filamentgroup.com/lab/jquery_iPod_style_and_flyout_menus/

それの基本的なバージョンはあまりスペースをとらないし、mouseoverイベントをサブアイテムに簡単にバインドして素敵なツールチップを表示することができます。

これがお役に立てば幸いです、シナン。

1
Sinan