如何從Bootstrap 4配置Popper.JS

Question

我正在使用split.js將屏幕分為兩部分。 在右側，很少有輸入字段具有Bootstrap工具提示。

由於容器的寬度在右側不夠寬，因此Bootstrap工具提示不會顯示在左側，而是應該顯示在裝訂線上方，而是顯示在右側。

為了處理它，我必須在我的項目中導入bootstrap.min.js並修改以下幾行：

preventOverflow: {
    boundariesElement: this.config.boundary
}

通過

preventOverflow: {
    enabled: false,
    boundariesElement: this.config.boundary
}

右側輸入字段的結構是這樣的。

<div id="leftContainer"></div>
<div id="rightContainer"></div>
    <table>
        <tr>
            <td>
                <label>
                      <div>someText</div>
                      <input type="text"
                             size="2"
                             rel="tooltip"
                             data-toggle="tooltip"
                             data-trigger="focus"
                             data-placement="left"
                             data-html="true"
                             data-title="someTitle"
                             value="someValue"
                             name="someName" />
                </label> etc. ...

他們像這樣初始化

$(function() { $('[rel="tooltip"]').tooltip({ trigger:'focus', placement: 'left' }); });

我的問題是：不是在我的項目中導入bootstrap.min.js並修改代碼以禁用Bootstrap中PopperJS實現的preventOverflow，有沒有一種方法可以在Bootstrap中正確配置PopperJS（例如，當我初始化工具提示時，而不是修改Bootstrap JS）？

Answer 1

您可以將默認“邊界”設置為窗口。 然后它將能夠溢出其父元素。

包含引導程序后，只需添加以下這行JS：

$.fn.tooltip.Constructor.Default.boundary = "window";
$.fn.dropdown.Constructor.Default.boundary = "window";

（花了相當長的時間才能找到有關自定義這些配置設置的文檔，我只能在這里找到這個簡短的說明）

進行一點測試，您也可以只傳遞一個無效的字符串，例如“ none”。 （唯一的“窗口”，“視口”，和“scrollParent”（默認） 的支持 ）