如何从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”（默认） 的支持 ）