绝对位置 div 的 Popper.js 工具提示放置（引导程序）答案

【问题标题】：Popper.js tooltip placement for absolute position div (bootstrap)绝对位置 div 的 Popper.js 工具提示放置（引导程序）
【发布时间】：2019-02-25 12:56:33
【问题描述】：

我正在尝试在已满的 div 的右上角创建一个“信息”图标（带有 chartist.js 图表）。为此，我使用了一个绝对定位的 div，其中包含 span。

<div class="position-absolute right-0" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Example Text">
    <span class="mt-2 fas fa-info-circle u-icon"></span>
</div>

不幸的是，这会导致工具提示位置（更重要的是悬停区域）低于实际图标。

关于使用 bootstrap/HTML/CSS 在已经完整的 div 上添加信息图标的最佳做法是什么，更具体地说，解决此问题的最佳/最简单方法是什么？

【问题讨论】：

标签： html twitter-bootstrap tooltip popper.js

【解决方案1】：

将工具提示放在 span 中：

<div class="position-absolute right-0">
    <span class="mt-2 fas fa-info-circle u-icon"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Example Text"></span>
</div>

【讨论】：