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

Posted 2023-03-06

【中文标题】无法摆脱工具提示上的下划线

【英文标题】：Can't get get rid of underline on tooltip

【发布时间】：2021-09-06 03:47:35

【问题描述】：

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

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

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

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

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

【问题讨论】：

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

【参考方案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; 已修复。