Блог

Главная - Вопросы по программированию - Не удается избавиться от подчеркивания во всплывающей подсказке

Не удается избавиться от подчеркивания во всплывающей подсказке

#css #wordpress #bootstrap-4

Вопрос:

Ладно, это первый раз, когда я задаю здесь вопрос, так что потерпите, если я неправильно отформатировал это.

Я создаю форму для сайта WordPress с помощью начальной загрузки, мне нужно добавить к ней несколько подсказок с потрясающим значком шрифта, и по какой-то причине я не могу избавиться от подчеркивания во всплывающей подсказке.

Изображение всплывающей подсказки с подчеркиванием

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; исправило это.

Комментарии:

1. Если вы используете инструменты разработчика своего браузера, вы должны быть в состоянии увидеть, применяется ли ваш 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; исправило это.

Метки: