2

このブートストラップ multi-selectを使用しています。私の目標は、メニュー項目の上にマウスオーバーしたときにツールチップを表示することです。

複数選択により、ツールチップが表示されないようです。

jsFiddle でのデモ

HTML :

<select name="menu[]" id="menu" class="multiselect" multiple="multiple">
    <optgroup label="Items">...
        <option id='one' value='1' title="Popover one" 
                data-toggle="tooltip" data-content="content one">1</option>
        <option id='two' value='2' title="Popover two" 
                data-toggle="tooltip" data-content="content two">2</option>
    </optgroup>
</select>

JS :

$('#menu').multiselect({
    maxHeight: 400,
    numberDisplayed: 1,
    nonSelectedText: 'All',
    enableCaseInsensitiveFiltering: true,
});

$("#one").tooltip({
    placement: 'right'
});
$("#two").tooltip({
    placement: 'right'
});

複数選択でツールチップを実現するにはどうすればよいですか?

4

3 に答える 3

3

この警告が表示されたとき、jsFiddle は冗談ではありませんでした。Github はすべてをテキストとして配信するため、実際には CDN として機能しません。適切なライブラリ ( cssおよびjs ) を追加すると、Bootstrap Multiselect が要素をどのように変換するかがわかります。

この元のマークアップ:

<select id="menu" class="multiselect" multiple="multiple">
    <optgroup label="Items">
        <option id='one' value='1'>1</option>
        <option id='two' value='2'>2</option>
    </optgroup>
</select>

これになります：

<ul class="multiselect-container dropdown-menu" >
    <li class="multiselect-item filter"><!-- truncated --></li>
    <li class="multiselect-item group" ><!-- truncated --></li>

    <li><a href="javascript:void(0);">
        <label class="checkbox">
            <input type="checkbox" name="multiselect" value="1"/> 1
        </label>
    </a></li>

    <li><a href="javascript:void(0);">
        <label class="checkbox">
            <input type="checkbox" name="multiselect" value="2"/> 2
        </label>
    </a></li>

</ul>

したがって、要素#oneはもはや画像にはありません。

そのため、関数のセレクターをtooltip少し変更する必要があります。liの子である要素をターゲットにしたいと考えてい.multiselect-containerます。.filterまた、 and.group要素も無視します。次に、好きなように呼び出しtooltipて作成しますtitle。

jsFiddle でのデモ

$('.multiselect-container li').not('.filter, .group').tooltip({
    placement: 'right',
    container: 'body',
    title: function () {
        // put whatever you want here
        var value = $(this).find('input').val();
        return 'Has Value of ' + value;
    }
});
于 2014-08-12T19:46:46.873 に答える
0

ブートストラップ ツールチップのドキュメントによると、「container: body」オプションをツールチップに追加する必要があります。

http://getbootstrap.com/javascript/#tooltips

ボタン グループと入力グループのツールチップには特別な設定が必要です(ツールチップがトリガーされたときに、要素の幅が広くなったり、丸みを帯びた角が失われたりするなど)。

フィドラー セッションで、複数選択のプラグインがコンソールでエラーを引き起こしていることに気付きました。コードと複数選択への参照を削除した後、ツールチップが表示されるようになりました。

http://jsfiddle.net/ug4gj8tx/1/

$("#one").tooltip({container: 'body'});
$("#two").tooltip({container: 'body'});

ポジショニングが少しずれているので、必要な場所に表示するには、調整する必要があるかもしれません.

于 2014-08-12T18:44:59.170 に答える