Hey there, this is my first time posting a question here so I hope I got everything right!
I'm currently in the process of creating a form for a WordPress site using Bootstrap. I need to incorporate tooltips with Font Awesome icons, but for some reason, I can't seem to remove the underline from the tooltip.
Check out this image of the tooltip with the underline
Here's a snippet of the code:
<label for="name"><a data-toggle="tooltip" data-placement="bottom" title="Placeholder"><i class='far fa-question-circle'></i></a>Name:</label>
And here are some CSS snippets:
label a i {
color: blue !important;
}
a:hover, a:visited, a:link, a:active
{
text-decoration: none !important;
}
Additionally, here's the JavaScript used:
// Document loaded function
jQuery(document).ready(function(){
jQuery('[data-toggle="tooltip"]').tooltip();
jQuery('.fa-question-circle').hover(function() {
jQuery(this).removeClass( 'far' ).addClass( 'fas' );
}, function() {
jQuery(this).removeClass( 'fas' ).addClass( 'far' );
});
});
I've tried various solutions to no avail. Any help would be much appreciated!
Update: Turns out there was a border-bottom: 1px; being added by the blank theme I'm using (I'm working on a plugin). Even though border:0!important; didn't work, adding
border-bottom: 0px solid !important;