I have a unique scenario where I have an input field with a Fontawesome icon added through the content property in my CSS file. This icon is supposed to display only on validation. Now, I'm trying to enhance this by adding a Bootstrap tooltip to the icon, but I'm struggling to find a way to do it since the icon is defined in the CSS file and not in the HTML file. Here is the desired outcome
It's worth mentioning that this requirement is within a modal.
$(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>