无法摆脱工具提示上的下划线答案

【问题标题】：Can't get get rid of underline on tooltip无法摆脱工具提示上的下划线
【发布时间】：2021-09-06 03:47:35
【问题描述】：

好的，这是我第一次在这里提出问题，如果我的格式不正确，请多多包涵。

我正在使用 bootstrap 为 WordPress 网站创建一个表单，我需要添加一些带有 Font Awesome 图标的工具提示，并且由于某种原因，我无法摆脱工具提示上的下划线。

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' );
  });
});

如您所见，我已经尝试了明显的解决方案，至少是我知道的那些，所以如果您发现我遗漏了什么，请告诉我。

编辑：好的，事实证明我正在使用的空白主题添加了一个border-bottom: 1px;（我正在制作一个插件），不知道为什么border:0!important; 没有解决这个问题，但添加border-bottom: 0px solid !important; 修复了它。

【问题讨论】：

如果您使用浏览器的开发工具，您应该能够看到您的 CSS 是否被应用，然后被其他东西覆盖。可能与其他插件的样式表冲突？

标签： css wordpress bootstrap-4

【解决方案1】：

我相信文本下划线应用于a 元素，所以应该删除它：

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

【讨论】：

【解决方案2】：

样式应用于链接。您可以使用 .text-decoration-none 实用程序类摆脱它。
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>

【讨论】：

【解决方案3】：

好吧，原来我正在使用的空白主题添加了一个border-bottom: 1px;（我正在制作一个插件），不知道为什么border:0!important; 没有解决这个问题，但添加border-bottom: 0px solid !important; 已修复。

【讨论】：