1

Twitter ブートストラップのツールチップを 1 つのインスタンスのみを表示するように制限することは可能ですか? 例：

<div class="d1" title="d1">
    <div class="d2" title="d2">
        <div class="d3" title="d3"/>
    </div>
</div>

$('.d1').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});
$('.d2').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});
$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});

問題は、div d3 にマウスを合わせると、すべてのツールチップが表示されることです。他のツールチップが表示されないようにする方法はありますか?

4

2 に答える 2

2

私は可能な回避策でフィドルを作りました。新しい "lone-tooltip" を定義することで、ユーザーは他のすべてのツールチップを非表示にして、子要素のツールチップを単独で表示することができます。

これは、ブートストラップの「shown.bs.tooltip」を使用することで機能しますが、「show.bs.tooltip」では機能しませんでした...

$('[data-toggle="tooltip"]').tooltip({
    container:'body',
})
$('[data-toggle="lone-tooltip"]').tooltip({
    container:'body'
})

$('[data-toggle="lone-tooltip"]').on('shown.bs.tooltip',function(e){
    $('[data-toggle="tooltip"]').not(this).tooltip('hide');
});

デモ https://jsfiddle.net/6jkd0cto/3/

于 2015-04-29T17:33:27.347 に答える
0

show イベントが DOM を他の div にバブリングするのを止めたいと思います。これが機能するかどうかを確認します。

$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'}).on('show', function(e) {
    e.stopPropagation();
});
于 2013-07-31T23:36:34.343 に答える