動態定位引導工具提示（用於動態生成元素）

我正在使用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功能，以返回適當的位置值，每個提示？

在此先感謝

來源

2012-11-22 maze

您打算如何觸發提示？懸停，點擊，其他？ – technoTarek

對於具有「rel」屬性的每個元素，都會在懸停時觸發工具提示。這是默認的引導程序行爲。 – 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])' 
});

來源

2012-11-22 15:49:46 davidkonrad

完美地工作。非常感謝。 – maze

只是對這個問題/答案的一個小評論。如果沒有意義。唯一可以將工具提示放置在底部/頂部的方法是position.left值恰好爲515.我認爲它的目的是返回「左下」，「左上」，「右下」和「右上「，但如果情況是這樣的話，if語句 – Sindre

很好，謝謝。 –

在文檔中的placement選項允許功能。它沒有記錄（我可以找到）函數中的參數。通過將arguments記錄到控制檯，這很容易確定。

這裏是您可以使用的：

$('body').tooltip({ 

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

    } 

/* other options*/ 
})

來源

2012-11-22 15:48:35 charlietfl

這一個爲我工作

$("[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-06 14:17:59 Jonathan

這是我怎麼把我的提示在引導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函數中。

來源

2013-09-27 10:27:03 simo

如果將選項container設置爲工具提示，則$(element).position()將無法正常工作。我使用container : 'body'，而不得不用$(element).offset()來代替。

來源

2013-11-14 12:15:38

這是速記，我用它來確定窗口寬度較小768與否，然後更改提示位置從左頂部：

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

來源

2017-03-04 19:30:23 Mohsen

動態定位引導工具提示（用於動態生成元素）

回答

相關問題