Всплывающая подсказка по иконке Font Awsome в Модале - PullRequest
Новая
       16

Всплывающая подсказка по иконке Font Awsome в Модале

0 голосов
/ 20 октября 2018

У меня есть поле ввода со значком Fontawesome, которое я добавил через content в моем файле CSS.Этот значок будет отображаться только при проверке.Я хочу добавить всплывающую подсказку начальной загрузки к значку, но не могу найти способ сделать это, поскольку моя иконка находится в файле CSS, а не в файле HTML. Это то, чего я пытаюсь достичь.

Возможно, важно отметить, что я пытаюсь добиться этого в модальном режиме.

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})
.input-validation-error input {
  border: 2px solid #f46262;
}

.input-validation-error input[type="text"] {
  position: relative;
}

.input-validation-error::before {
  font-family: "Font Awesome 5 Free";
  color: #f46262;
  position: relative;
  content: "\f06a";
  font-weight: 900;
  z-index: 2;
  top: 36px;
  right: -210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<form class="registration-form">
  <div class="form-group input-validation-error">
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario" data-toggle="tooltip" data-placement="top" title="I'm a tooltip">
  </div>
</form>

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Наконец-то разобрался.Мой z-индекс вызывал проблемы, поэтому я изменил его с: 

z-index: 3;

на 

z-index: 5 !important;
0 голосов
/ 20 октября 2018

Добавьте пустой div "placeholder" перед входом и расположите его так же, как значок.Используйте заполнитель в качестве триггера всплывающей подсказки ... 

.tooltip-trigger {
  position: absolute;
  z-index: 3;
  top: 36px;
  left: 210px;
  width: 30px;
  height: 30px;
}

https://www.codeply.com/go/VxFPfXj9oa

...