Bootstrap tooltip在第二次點擊時改變其位置？

Question

我爲我的網站使用引導程序3。我用bootstrap提供的工具提示，我一直在圖像上點擊顯示。
但我面臨的問題是：當我點擊圖片上的第一次正常工作，但當我第二次點擊它的位置變化。我已經附加了兩張圖片，第一次點擊和第二次點擊時會得到這些圖片。請爲它提供解決方案。

我正在添加我正在使用的編碼。

$('#trypersonalLink').tooltip({ 
    title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    placement : "right", 
    trigger : "click", 
    html : true, 
    container : 'body' 
}).on('shown.bs.tooltip', function() { 
    $('.tooltip.right').css('margin-left', '-86px'); 
    $('.tooltip-inner').css({ 
     'max-width':'370px', 
     'width':'445px' 
    }); 
}); 

Answer 1

這裏是發生了什麼：

1. 您按一下按鈕
2. 工具提示加載默認大小，其位置被JS計算（根據大小）
3. shown.bs.tooltip被觸發
4. 更改工具提示大小
5. 另一次點擊按鈕
6. 工具提示被重新加載，但其位置是根據其新尺寸重新計算的！

這就是爲什麼你的工具提示只在第一次加載時沒有相同的位置。

要解決這個問題，您應該避免在shown.bs.tooltip中設置margin，max-width和width。使用它的CSS！

$('#trypersonalLink').tooltip({ 
    title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    placement : "right", 
    trigger : "click", 
    html : true, 
    container : 'body' 
}); 

.tooltip-inner { 
    max-width: 370px; 
} 

---

獎金

如果你只是想提高這個提示的大小，而不是其他的，你可以在你的選擇指定不同的容器：

$('#trypersonalLink').tooltip({ 
    title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    placement : "right", 
    trigger : "click", 
    html : true, 
    container : '#extended' 
}); 

$('#trypersonalLink2').tooltip({ 
    title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
    placement : "right", 
    trigger : "click", 
    html : true, 
    container : 'body' 
}); 

#extended .tooltip-inner { 
    max-width: 370px; 
} 

Bootply