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

Question

[rifat2125]

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

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

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

Сейчас выглядит так, один тултип на другой залезает

А нужно так


Либо тот, что слева, необходимо сместить вниз

Answer 1

[Dino Winchester]

Можно попробовать таким образом менять положение:

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 замените на нужные вам.

Comments

[rifat2125]

Спасибо за такой развернутый ответ!
Я пробовал использовать setProps, но почему-то элемент не обновляется

Выводил instance в консоль и смотрел свойства, там placement менялось, а на странице нет почему-то

И в вашем примере на странице тоже не обновляет тултипы.

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

- такого еще не встречал)

[Dino Winchester]

rifat2125, покажите код который вы используете.

[rifat2125]

$('.item__right .item__prc').each((_, element) => {

    const instance = tippy(element);

    instance.setProps({
      placement: 'top',
    });
    
  });

[rifat2125]

Ваш код заработал!
Мне пришлось его немного переписать)

Только я не пойму почему до этого setProps не работало, а новом варианте заработало

P.S. я передаю callback в функцию инициализации тултипа и уже там использую ваш код принимая в качестве аргумента instance.

[Dino Winchester]

rifat2125, Мне кажется что без цикла будет сделать намного проще:

Пример кода

const triggerOne = tippy(".button-1", {
     placement: "bottom-end"
});

const triggerTwo = tippy(".button-2", {
     placement: "bottom-end"
});

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

const breakpointChecker = () => {
     if (breakpoint.matches) {
          triggerOne[0].setProps({
               placement: "bottom-end"
          });
          triggerTwo[0].setProps({
               placement: "left-start"
          });
     } else {
          triggerOne[0].setProps({
               placement: "left-start"
          });
          triggerTwo[0].setProps({
               placement: "bottom-end"
          });
     }
};

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

Правда количество кода может увеличиться и такой подход конечно лучше использовать при небольшом количестве тултипов.

[rifat2125]

const triggerOne = tippy(".button-1", {
     placement: "bottom-end"
});

Этот код создает новый тултип или получает со страницы уже имеющийся?

[Dino Winchester]

rifat2125, Получает со страницы уже имеющийся тултип, по селектору класса.

[rifat2125]

Только почему-то не меняет свойство элемента

[Dino Winchester]

rifat2125, обновил ответ.