Tooltip в прокручиваемом элементе

18 июня 2019, 22:20

Создал tooltip на чистом css. Проблема заключается в том, что он находится в прокручиваемом модальном окне, и не меняет своих координат относительно страницы при прокрутке. То есть все tooltip'ы, которые находится в части окна ниже его высоты, не прокручиваются вместе с модальным окном.

Код:

.tooltip:before { 
  content: "\f059"; 
  margin-left: 3px; 
  font-family: "Font Awesome 5 Free"; 
  font-size: .8em; 
} 
.tooltip > span { 
  max-width: 250px; 
  margin-top: 17.5px; 
  padding: 2px 3px; 
  border-radius: 5px; 
  position: absolute; 
  text-align: center; 
  visibility: hidden; 
  opacity: 0; 
  background-color: rgba(51, 51, 51, .9); 
  color: #ffffff; 
} 
 
.tooltip:hover > span, 
.tooltip:active > span { 
  visibility: visible; 
  opacity: 1 !important; 
  transition-duration: .7s; 
}

<form> 
 
  <fieldset> 
    <label for="login">Логин <i class="tooltip"><span>Логин должен содержать от 3 до 64 любых символов.</span></i></label> 
    <input id="login" type="text" name="login" placeholder="Ikor_Dadurii"> 
 
    <label for="password">Пароль <i class="tooltip"><span>Пароль должен содержать от 8 символов. Допустимые символы: латинские буквы, цифры, символы "-" и "_"</span></i></label> 
    <input id="password" type="password" name="password" placeholder="qwerty123"> 
 
    <label for="password_2">Повторите пароль</label> 
    <input id="password_2" type="password" name="password_2" placeholder="qwerty123"> 
 
    <label for="email">Email</label> 
    <input id="text" type="text" name="email" placeholder="test@example.com"> 
 
    <label for="realname">Имя</label> 
    <input id="realname" type="text" name="realname" placeholder="Валера Орехов"> 
 
    <label for="tel">Номер телефона <i class="tooltip"><span>В международном формате.</span></i></label> 
    <input id="text" type="text" name="tel" placeholder="+375 XX XXXXXXX"> 
  </fieldset> 
  <button>Зарегистрироваться</button> 
 
</form>