獲取工具提示寬度並計算展示位置（Twitter Bootstrap）

這是我的previous question的後續工作。獲取工具提示寬度並計算展示位置（Twitter Bootstrap）

我需要動態放置Bootstrap工具提示。爲此，我需要知道觸發工具提示的元素的位置（工作正常）以及應該顯示的工具提示的寬度：

編輯說明：我的工具提示是動態生成的，然後插入到內容中。例如，如果它們太靠近屏幕的左邊緣，我需要將它們放在'正確'而不是'頂部'。現在我希望獲得工具提示的寬度，以便在實際上熄滅屏幕時將其放在「正確」的位置。

$('body').tooltip({ 
    delay: { show: 300, hide: 0 }, 
    selector: '[rel=tooltip]:not([disabled])', 
    placement: function(tip, element) { 
     var offsetLeft = $(element).offset().left; 
     var offsetRight = ($(window).width() - (offsetLeft + $(element).outerWidth())); 

     // need help here: how to get the width of the current tooltip? 
     // currently returns "0" for all elements 
     var tooltipWidth = $(tip).outerWidth(); 
     console.log(tooltipWidth); 

     if (offsetLeft < 220) { 
      return 'right'; 
     } 
     if (offsetRight < 220) { 
      return 'left'; 
     } 
     else { 
      return 'top'; 
     } 
    } 
});

在此先感謝。

來源

2012-11-23 maze

爲什麼你需要將它們放在dinamically，而他們只是由自舉放置？ – sbaaaang

如果你需要改變一些工具提示位置直接使用css，新的類和新的css規則，也許我沒有抓住你真正需要的東西 – sbaaaang

我的工具提示是動態生成的，然後插入到內容中。例如，如果它們太靠近屏幕的左邊緣，我需要將它們放在'正確'而不是'頂部'。現在我希望獲得工具提示的寬度，以便在實際上熄滅屏幕時將其放在「正確」的位置。 – maze

從邏輯的角度來看，這是不可能的:)想一想 - 工具提示調用放置功能來獲得它的位置，然後它將小費插入到頁面中並對其進行設計。

但是，您可以創建一個具有與即將到來的提示相同功能的虛擬提示，並由此獲得寬度。就像這樣：

$('body').tooltip({ 
    delay: { show: 300, hide: 0 }, 
    placement: function(a, element) { 

     //title is by tooltip moved to data-original-title 
     var title=$(element).attr('data-original-title'); 

     //create dummy, a div with the same features as the tooltïp 
     var dummy=$('<div class="tooltip">'+title+'</div>').appendTo('body'); 
     var width=$(dummy).width(); 
     dummy.remove(); 

     //now you have width 
     //.. 
     //.. 

     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-23 14:06:57 davidkonrad

那麼，這是有道理的。在此期間，我選擇了另一種方法來定位我的工具提示。但我想我可以在你的幫助下實現我今天上午想要的結果:)再次感謝。 – maze

你可以使用：

var dummy = $('<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + title + '</div></div>').appendTo('body');

得到確切的股利作爲工具提示格高度和寬度相同。

來源

2016-12-27 06:03:19

獲取工具提示寬度並計算展示位置（Twitter Bootstrap）

回答

相關問題