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

Question

[Анастасия]

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

<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.
Подскажите пожалуйста как это сделать. Или посоветуйте лучший способ решить эту проблему

Comments

[Ankhena]

Или посоветуйте лучший способ решить эту проблему

Пожалуйста:

когда ширина экрана меньше 800px.

Выясняете ширину экрана.
Пишете if
Если подходит, запускаете скрипт.

Аналогичную процедуру запускаете по события ресайза.

Answer 1

[Сергей]

Но я хочу чтобы этот скрипт работал только, когда ширина экрана меньше 800px.

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