Can't get get rid of underline on tooltip

user_16290413 0
Viewed 213

Okay, so this is the first time I've asked a question on here, so bear with me if I formatted this incorrectly.

I'm creating a form for a WordPress site using bootstrap, I need to add some tooltips with a Font Awesome icon to it, and for some reason, I can't get rid of the underline on the tooltip.

Image of tooltip with underline

html:

<label for="name"><a data-toggle="tooltip" data-placement="bottom" title="Placeholder"><i class='far fa-question-circle'></i></a>Name:</label>

css:

label a i {
  color: blue !important;
  /*text-decoration: none !important;
    border:0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    text-decoration-color: transparent!important;*/
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none !important;
    border:0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    text-decoration-color: transparent!important;
}

javascript:

// Document loaded function
jQuery(document).ready(function(){
  //initialize tool tips 
  jQuery('[data-toggle="tooltip"]').tooltip();
  jQuery('.fa-question-circle').hover(function() {
    jQuery(this).removeClass( 'far' ).addClass( 'fas' );
  }, function() {
    jQuery(this).removeClass( 'fas' ).addClass( 'far' );
  });
});

As you can see, I already tried obvious solutions, at least the ones that I'm aware of, so if you can see something I'm missing let me know.

Edit: Okay so it turns out there was a border-bottom: 1px; being added by the blank theme I'm useing(I'm making a plugin), don't know why the border:0!important; didn't fix that, but adding border-bottom: 0px solid !important; fixed it.

bootstrap-4 wordpress css
3 Answers

Okay so it turns out there was a border-bottom: 1px; being added by the blank theme I'm useing(I'm making a plugin), don't know why the border:0!important; didn't fix that, but adding border-bottom: 0px solid !important; fixed it.

user_162904130

I believe the text underline is applied to the a elements, so this should remove it:

label a {
   text-decoration: none !important;
}
user_139291400

The style is applied to the link. You can get rid of it with the .text-decoration-none utility class.
https://getbootstrap.com/docs/4.6/utilities/text/#text-decoration

<label for="name">
  <a class="text-decoration-none" data-toggle="tooltip" data-placement="bottom" title="Placeholder">
    <i class='far fa-question-circle'></i>
  </a>Name:
</label>
user_61273930
Related