Как правильно скрыть текст при адаптации?

У меня на сайте есть текст с иконкой:

<div class="form__tooltip">
    <div class="form__tooltip--btn">
        <i class="fas fa-info-circle"></i>
    </div>
    <div class="form__tooltip--text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam saepe
        odio ratione ex hic perferendis officia necessitatibus.
    </div>
</div>


При уменьшении экрана, текст я скрываю и хочу показать его при нажатии на form__tooltip--btn

@media (max-width:800px) {
    .form__tooltip--text {
        display: none;
        position: absolute;
        width: 300px;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 40px;
        border-radius: 10px;
        padding: 8px 12px;
        line-height: 1.2rem;
        -webkit-box-shadow: 0 5px 20px 0 rgb(26 92 255 / 20%);
        box-shadow: 0 5px 20px 0 rgb(26 92 255 / 20%);
        background: #1E1E27;
        z-index: 1;
    }
}


Для этого я использую этот скрипт:

$(document).ready(function () {
  $(".form__tooltip--btn").click(function () {
    $(".form__tooltip--text").hide();
    $(this).next(".form__tooltip--text").toggle();
  });

  $(document).click(function (e) {
    var target = e.target;
    if (
      !$(target).is(".form__tooltip") &&
      !$(target).parents().is(".form__tooltip")
    ) {
      $(".form__tooltip--text").hide();
    }
  });
});


Но я хочу чтобы этот скрипт работал только, когда ширина экрана меньше 800px.
Подскажите пожалуйста как это сделать. Или посоветуйте лучший способ решить эту проблему
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ответы на вопрос 1
Shull
@Shull
хочу быть хорошим IT-шником
Но я хочу чтобы этот скрипт работал только, когда ширина экрана меньше 800px.

Посмотрите вот тут:
https://ru.stackoverflow.com/questions/1161950/Как...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы