動的位置ブートストラップツールチップ

Question

私はTwitterのブートストラップ（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"; 
} 

私は、各ツールチップのための適切な配置値を返すためにpositionTooltip関数にcurrentElement正しく渡すことができますどのように？ドキュメント内placementオプションが機能することができます事前

Answer 1

ブートストラップは、あなたのケースで

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

そう要素を含んでいるのparamsを配置関数を呼び出し、次の操作を行います。

$('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])' 
}); 

Answer 2

に

感謝。関数内にどのような引数があるのか​​はわかりません。しかし、argumentsをコンソールに記録することで、これを簡単に判別できます。ここで

はあなたが使用できるものです。

$('body').tooltip({ 

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

    } 

/* other options*/ 
}) 

Answer 3

これは私のために働いた

また

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

     }); 

Answer 4

これは私がに私のツールチップを配置する方法であるブートストラップ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機能でラップされています。オプションcontainerがツールチップに設定されている場合

Answer 5

$(element).position()は正しく動作しません。

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

Answer 6

これは私がその後、先頭に左からツールチップの配置を変更、ウィンドウ幅が768より小さいかそうでないかを決定するために使用する簡略化したものです：あなたがツールヒントをトリガーする予定はどうすればよい

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