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";

（找到有关自定义这些配置设置的文档花了很多时间，我只能找到这个简短的解释here）

稍作测试，您也可以只传递无效的字符串，例如“ none”。（仅“窗口”，“视口”和“ scrollParent”（默认）are supported）

如何从Bootstrap 4配置Popper.JS

1 个答案: