@rifat2125

Как задать положение Tippy.js в зависимости от размера окна?

Здравствуйте!
Вопрос специфичный: есть библиотека tippy.js, которая позволяет создавать tooltip'ы.

Мне необходимо на экранах размером меньше или равно планшету изменить положение тултипы, чтобы он располагался сверху элемента, а тултип №2 располагался снизу.

Как можно это добиться? У Tippy.js есть настройка fallbackPlacements: ['left', 'top'], которая позволяет перемещать тултип, если он не помещается в контейнере, но мне он не подходит.

Сейчас выглядит так, один тултип на другой залезает
62fc959fae65f851215660.png
А нужно так
62fc95fbd6345161144580.png

Либо тот, что слева, необходимо сместить вниз
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
Можно попробовать таким образом менять положение:

const instance = tippy(".target");
const breakpoint = window.matchMedia("(max-width: 1200px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
              instance[0].setProps({
               placement: "bottom-end"
          });

     } else {
          instance[0].setProps({
               placement: "left-start"
          });
     }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();


Библиотека Tippy предоставляет метод setProps, который позволяет менять свойства экземпляра, а значит если воспользоваться этим методом при достижении нужной ширины экрана, можно обновить свойство placement.

Вместо matchMedia конечно можно воспользоваться resize, но на мой взгляд - matchMedia намного лучше справляется с поставленными задачами.

Кстати Tippy возвращает массив независимо от того, какой тип селектора используется. Это связано с тем, что функция Tippy может возвращать несколько элементов в зависимости от селектора. Поэтому чтобы вызывать методы у экземпляра, придётся обращаться к нему как к элементу массива, но это конечно если инициализация происходит без использования цикла.

UPD:

Если нужна инициализация нескольких тултипов и изменение параметров при определенной ширине экрана, тогда нужного результата можно добиться например так:

// коллекция тултипов
const triggers = document.querySelectorAll(".item__right, .item__prc");

triggers.forEach(element => {
     const instance = tippy(element, {
          // ваши настройки
     });

     // ширина экрана при достижении которой нужно изменить настройки
     const breakpoint = window.matchMedia("(max-width: 1200px)");

     const togglePlacement = status => {
          // селекторы классов используемых тултипов
          const triggerOne = "item__right";
          const triggerTwo = "item__prc";

          const { reference: target } = instance;

          const isTargetElement = v => Boolean(target.classList.contains(v));

          switch (status) {
               case "update":
                    if (isTargetElement(triggerOne)) {
                         instance.setProps({
                              placement: "bottom-end"
                         });
                    } else if (isTargetElement(triggerTwo)) {
                         instance.setProps({
                              placement: "left-start"
                         });
                    }
                    break;
               case "default":
                    if (isTargetElement(triggerOne)) {
                         instance.setProps({
                              placement: "left-start"
                         });
                    } else if (isTargetElement(triggerTwo)) {
                         instance.setProps({
                              placement: "bottom-end"
                         });
                    }
          }
     };

     const breakpointChecker = () => {
          if (breakpoint.matches) {
               return togglePlacement("update");
          } else {
               return togglePlacement("default");
          }
     };

     breakpoint.addEventListener("change", breakpointChecker);
     breakpointChecker();
});


Настройки, селекторы и значения свойств placement в функции togglePlacement замените на нужные вам.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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