引导工具提示并不总是在鼠标悬停时显示

Question

I'm using an icon from Font Awesome to display some text in a tooltip on a mouseover with Bootstrap. However, when I hover my mouse pointer over the icon it doesn't display the tooltip on all times. I've pinned the issue down to the tooltip being displayed correctly when I hover over the left half of the icon, but not when I hover over the right half of the icon. Like so:

I'm using AdminLTE as a template to build my website. The issue is seen on both Edge and Chrome, I didn't test with other browsers. See below the HTML, JavaScript and CSS that I'm using. I insert the icon into a card next to a label text.

I also found out that if I remove the data-toggle="tooltip" declaration it works correctly. Albeit with the default "ugly" rendering of my browser.

HTML:

<div class="card card-primary">
    <div class="card-header">
        <h3 class="card-title">Settings</h3>
    </div>
    <form>
        <div class="card-body">
            <div class="form-group">
                <label>Strategy</label>
                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
                   title="This is a tooltip"></i>
                <input type="text" class="form-control" value="3" id="maxPositions">
            </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>
</div>

Initialization of tooltips:

$('[data-toggle="tooltip"]').tooltip({ boundary: 'window' }) 

Tooltip CSS (came with AdminLTE):

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

Answer 1

I just found a workaround, which is not a full fix to the problem: if I select any data-placement value other than right it renders correctly on both left and right mouseover. If I use the value top it renders the tooltip a bit off, to the left:

So I was thinking maybe that's related to the issue. Any other answers are welcome