6

問題を示すために、簡単なjsFiddleをセットアップしました。

選択リストのオプション要素で Bootstrap のツールチップまたはポップオーバーを使用すると、ポップオーバーまたはツールチップはアイテムの横に表示されず、ページの左上隅に表示されます。

私が使用しているHTMLは次のとおりです。

<select size="5" id="testList">
    <option value="1" rel="popover" data-original-title="This is item 1." data-content="Lots of stuff to say" style="color: red; ">Item 1</option>
    <option value="2" rel="popover" data-original-title="This is item 2." data-content="Lots of stuff to say" style="color: green; ">Item 2</option>
    <option value="3" rel="popover" data-original-title="This is item 3." data-content="Lots of stuff to say" style="">Item 3</option>
    <option value="4" rel="popover" data-original-title="Blah" data-content="Lots of stuff to say" style="color: orange; ">Item 4</option>
</select>​

JavaScript 呼び出しは単純です。

$(function () {
    $('#testList option[rel=popover]').popover({
        placement: 'right',
        trigger: 'hover'
    });
});  ​

適切な場所に表示するにはどうすればよいですか?

4

2 に答える 2

16

期待されています。TB tooltip/関連する要素およびpopoverに基づいて位置を計算します。Option にはそのようなプロパティはありません。offsetWidthoffsetHeightpopoverbody

ただし、それ自体のポップオーバーを配置できますselect。選択用にバインドmouseoverします。そこから、ホバーされているデータ属性が入力されたポップオーバーが右側に表示optionされます。

HTML、クリーンアップ、rel="popover"および"data-original-title"

<select size="4" id="testList">
<option value="1" data-title="This is item 1." data-content="Lots of stuff to say 1" style="color:red;">Item 1</option>
<option value="2" data-title="This is item 2." data-content="Lots of stuff to say 2" style="color:green;">Item 2</option>
<option value="3" data-title="This is item 3." data-content="Lots of stuff to say 3" style="">Item 3</option>
<option value="4" data-title="Blah" data-content="Lots of stuff to say 4" style="color:orange;">Item 4</option>
</select>​​

マウスオーバーのバインド、オプション データ属性の収集、ポップオーバーの表示

$("#testList").on('mouseover', function(e) {
    var $e = $(e.target); 
    if ($e.is('option')) {
        $('#testList').popover('destroy');
        $("#testList").popover({
            trigger: 'manual',
            placement: 'right',
            title: $e.attr("data-title"),
            content: $e.attr("data-content")
        }).popover('show');
    }
});

いくつかのクリーンアップにより、選択を終了するとポップオーバーが消えます

$("#testList").on('mouseleave', function(e) {
    $('#testList').popover('destroy');
});

オプションリストのほうがはるかにうまくいくとは思いません:)ポップオーバーが各オプションの垂直位置にインデックスで多かれ少なかれ従うように強制するのに苦労する可能性があります。template

フォークされたコードhttp://jsfiddle.net/mM8sx/

更新- Windows 上の IE と Chrome の問題。
この回答への参照をいくつか見たことがありますが、Windows 上の IE および Chrome では機能していなかったことを指摘しています。これは、Windows では<option>要素がマウス イベントをまったく受け取らないという事実によるものです。これは、上記の回答の「ハック」であり、「クロスブラウザー」になっています。

Windows 上の Chrome、FF、IE、および Safari で正常にテストされています。Ubuntu 上の Chrome、FF、Opera。アイデアは、オプションのマウスイベント/高さに<option>基づいてインデックスを計算することにより、(マウスオーバーではなく)正しいマウス移動をターゲットにすることです。clientY

$("#testList").on('mousemove', function(e) {
    if (!isWindows) {
        var $e = $(e.target);
    } else {
        var newIndex = Math.floor(e.clientY/optionHeight);
        if (newIndex === index) return;
        index = newIndex;
        $e = $(this).find('option:eq('+index+')');
    }    
    if ($e.is('option')) {
        $('#testList').popover('destroy');
        $("#testList").popover({
            trigger: 'manual',
            placement: 'right',
            title: $e.attr("data-title"),
            content: $e.attr("data-content")
        }).popover('show');
    }
});

詳細についてはフィドルを参照してください - > http://jsfiddle.net/LfrPs/

于 2012-10-29T21:03:22.480 に答える
2

同じポップオーバー ボックスをドロップダウン ボックスに適用しようとしましたが、うまくいきませんでした:

  1. ドロップダウン選択内のオプション要素に対してイベントがまったく発生しないようです。
  2. 'select' 要素の hover イベントの e.target は、常に select 要素自体になります! ホバーされている「オプション」タグへの参照を取得する方法はありません。
  3. また、「option」要素のテキストを「span」要素にラップして、「hover」または「mouseover」イベント リスナーをその「span」要素に追加しようとしました。これもうまくいきません。

ドロップダウンをリストに変更すると (つまり、 size="xx" 属性を追加する)、オプション要素は通常の要素として機能します。ドロップダウンボックスでは、すべてのオプションがブラウザによって別のレイヤーにラップされているのではないかと思います。select 要素の内部要素との対話は許可されません。私が間違っているかどうか教えてください。

于 2013-06-14T07:34:40.100 に答える