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

【问题标题】：Bootstrap tooltip not always showing on mouseover引导工具提示并不总是在鼠标悬停时显示
【发布时间】：2021-05-07 20:26:16
【问题描述】：

我正在使用 Font Awesome 中的图标在 Bootstrap 鼠标悬停时的工具提示中显示一些文本。但是，当我将鼠标指针悬停在图标上时，它不会始终显示工具提示。我将问题归结为当我将鼠标悬停在图标的左半边时正确显示的工具提示，但当我将鼠标悬停在图标的右半边时却没有。像这样：

我使用AdminLTE 作为模板来构建我的网站。这个问题在 Edge 和 Chrome 上都存在，我没有用其他浏览器测试过。请参阅下面我正在使用的 HTML、JavaScript 和 CSS。我将图标插入到 card 旁边的 label 文本中。

我还发现，如果我删除 data-toggle="tooltip" 声明，它可以正常工作。尽管我的浏览器默认呈现“丑陋”。

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>

工具提示的初始化：

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

工具提示 CSS（随 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;
}

【问题讨论】：

在插入 标记的位置显示更多 html，看起来另一个元素与其重叠，或者它自身的元素太小。
问题已更新

标签： javascript html css bootstrap-4 adminlte

【解决方案1】：

我刚刚找到了一个解决方法，它不能完全解决问题：如果我选择任何data-placement 值other 而不是right，它会在鼠标左右悬停时正确呈现。如果我使用值 top 它会使工具提示有点偏左：

所以我在想也许这与问题有关。欢迎任何其他答案

【讨论】：