How to configure Popper.JS from Bootstrap 4

Question

I'm using split.js to split the screen into two parts. On the right part, there are few input fields having Bootstrap tooltip on focus.

As the width of the container isn't wide enough on the right part, Bootstrap tooltips are not displayed on the left, as they should, over the gutter, but on the right.

To deal with it I had to import bootstrap.min.js in my project and modify the following lines :

preventOverflow: {
    boundariesElement: this.config.boundary
}

by

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

The structure of input fields of the right part is like this.

<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. ...

And they are initialized like this

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

My question is: instead of importing bootstrap.min.js in my project and modify the code to disable preventOverflow from PopperJS implementation in Bootstrap, is there a way to configure PopperJS in Bootstrap properly (like when I'm initializing tooltips, instead of modifying Bootstrap JS)?

Answer 1

You can just set the default "boundary" to the window. Then it will be able to overflow out of its parent element.

Just add this line of JS after you include bootstrap:

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

(it took quite some time to find the documentation on customizing these config settings, I could only find this super short explanation here )

Testing around a little bit, you can also just pass an invalid string, like "none". (only "window", "viewport", and "scrollParent" (the default) are supported )