web-dev-qa-db-ja.com

動的に位置Bootstrap tooltip（動的に生成された要素の場合）

Twitter Bootstrap（http://Twitter.github.com/bootstrap/javascript.html#tooltips）で提供されているツールチップを使用しています。

DOMに動的に挿入されたマークアップがあり、ツールチップをトリガーする必要があります。そのため、次の方法でツールチップをトリガーします（https://github.com/Twitter/bootstrap/issues/4215）：

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])'
});

ツールチップが画面の端に近づきすぎないようにするには、ツールチップをトリガーする要素の配置場所に基づいて動的に位置を設定できる必要があります。私はそれを次のように考えました：

   $('body').tooltip({
        delay: { show: 300, hide: 0 },
        // here comes the problem...
        placement: positionTooltip(this),
        selector: '[rel=tooltip]:not([disabled])'
    });



function positionTooltip(currentElement) {
     var position = $(currentElement).position();

     if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

     return "top";
}

各ツールチップの適切な配置値を返すために、currentElementをpositionTooltip関数に正しく渡すにはどうすればよいですか？

前もって感謝します

javascriptjquerytwitter-bootstraptooltip
22
maze

ブートストラップは、要素を含むパラメーターで配置関数を呼び出します

this.options.placement.call(this, $tip[0], this.$element[0])

あなたの場合、これを行います：

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(tip, element) { //$this is implicit
        var position = $(element).position();
        if (position.left > 515) {
            return "left";
        }
        if (position.left < 515) {
            return "right";
        }
        if (position.top < 110){
            return "bottom";
        }
        return "top";
    },
    selector: '[rel=tooltip]:not([disabled])'
});
34
davidkonrad

これは、ツールチップをBootstrap 2.3.2に配置する方法です。

placement: function (tooltip, trigger) {
    window.setTimeout(function () {
        $(tooltip)
            .addClass('top')
            .css({top: -24, left: 138.5})
            .find('.tooltip-arrow').css({left: '64%'});

        $(tooltip).addClass('in');
    }, 0);
}

基本的に、ここで言っているのは、ツールチップがカスタムオフセットを使用して上部に配置され、下部の小さな三角形の矢印が少し右側にあるということです。

最後に、ツールチップを表示するinクラスを追加しています。

また、コードはsetTimeout 0関数でラップされていることに注意してください。

5
simo

Docsのplacementオプションは、functionを許可します。関数にどの引数があるかは文書化されていません（見つけることができました）。ただし、argumentsをコンソールに記録することで簡単に判断できます。

使用できるものは次のとおりです。

$('body').tooltip({

   placement: function(tip, el){
     var position = $(el).position();
      /* code to return value*/

  }

/* other options*/
})
5
charlietfl

これは、ウィンドウの幅が768より小さいかどうかを判断するために使用する短縮形で、ツールチップの配置を左から上に変更します。

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
1
Mohsen

これは私のために働いた

$("[rel=tooltip]").popover({
            placement: function(a, element) {
               var position = $(element).parent().position();
               console.log($(element).parent().parent().is('th:first-child'));

                if ($(element).parent().parent().is('th:last-child')) {
                    return "left";
                }
                if ($(element).parent().parent().is('th:first-child')) {
                    return "right";
                }
                return "bottom";
            },

        });
0
Jonathan

オプションcontainerがツールチップに設定されている場合、$(element).position()は正しく機能しません。

私の場合、_container : 'body'_を使用し、代わりに$(element).offset()を使用する必要があります。

0
Ludovic Guillaume