23

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 関数に正しく渡すにはどうすればよいですか?

前もって感謝します

4

6 に答える 6

35

Bootstrapは、要素を含むparamsを使用して配置関数を呼び出します

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])'
});
于 2012-11-22T15:49:46.917 に答える
5

placementdocsのオプションは function を許可します。関数にどのような引数が含まれているかは文書化されていません(私が見つけることができました)。argumentsただし、これはコンソールにログを記録することで簡単に判断できます。

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

$('body').tooltip({

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

  }

/* other options*/
})
于 2012-11-22T15:48:35.603 に答える
0

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

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

于 2013-11-14T12:15:38.117 に答える
0

this one worked for me

$("[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";
            },

        });
于 2013-05-06T14:17:59.690 に答える