tippy dropdown

Source:

Демо:

Плагины:

Подключение:

//

Разметка:

//

Стили:

//

Инициализация:

//

function initInStockBtn() {
  const btn = document.querySelector("#product-stock-btn");
  const dropdown = document.querySelector("#product-stock-dropdown");
  if (!btn || !dropdown) return;

  const instance = tippy(btn, {
    content: dropdown,
    trigger: "manual",
    placement: "bottom-end",
    allowHTML: true,
    interactive: true, // Чтобы можно было кликать внутри
    arrow: false,
    offset: [0, 0],
    onShow() {
      btn.classList.add("active");
      dropdown.classList.add("active");
    },
    onHide() {
      btn.classList.remove("active");
      dropdown.classList.remove("active");
    },
  });

  btn.addEventListener("click", (e) => {
    e.stopPropagation();

    if (isMobile()) {
      Modals.openById("modal-stock");
    } else {
      if (instance.state.isVisible) {
        instance.hide();
      } else {
        instance.show();
      }
    }
  });

  window.matchMedia("(max-width: 639.98px)").addEventListener("change", (e) => {
    if (e.matches) {
      instance.hide();
    } else {
      Modals.closeById("modal-stock");
    }
  });
}