Bootstrap工具提示在Font Awsome图标上 在Modal.

Question

我有一个带有Fontawesome图标的输入字段，我通过content添加到我的CSS文件中。此图标仅在验证时显示。我想将引导程序的工具提示添加到图标上，但我想不出一种方法来做到这一点，因为我的图标在 CSS 文件而不是 HTML 文件上。 这就是我想要实现的目标。

值得注意的是，我正在尝试在模态中实现这一点。

$(function() {
$('[data-toggle="tooltip"]').tooltip()
})

.input-validation-error input {
border: 2px solid #f46262;
}
.input-validation-error input[type="text"] {
position: relative;
}
.input-validation-error::before {
font-family: "Font Awesome 5 Free";
color: #f46262;
position: relative;
content: "f06a";
font-weight: 900;
z-index: 2;
top: 36px;
right: -210px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<form class="registration-form">
<div class="form-group input-validation-error">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario" data-toggle="tooltip" data-placement="top" title="I'm a tooltip">
</div>
</form>

Answer 1

在输入之前添加一个空的"占位符"div，并将其定位为与图标相同的位置。使用占位符作为工具提示触发器...

.tooltip-trigger {
position: absolute;
z-index: 3;
top: 36px;
left: 210px;
width: 30px;
height: 30px;
}

https://www.codeply.com/go/VxFPfXj9oa

Answer 2

终于想通了。 我的 z 索引造成了麻烦，所以我将其从：

z-index: 3;

自

z-index: 5 !important;