Tippy

Документация

Актуальная версия на момент написания v6.3.7

npm i tippy.js

Особенности работы с TS

Работает из коробки

Пример использования

HTML

Обычная кнопка
<button data-tippy-content="content for tippy">my button</button>

Задезебленная кнопка
<span data-tippy-content="This button is disabled">
  <button disabled>button</button>
</span>

Шаблон в tippy
<img src="https://picsum.photos/200/300" data-tippy-template="image" alt="" />
<template data-template="image">
  <strong>Bolded content</strong>
</template>

TS

import tippy from "tippy.js";

tippy("[data-tippy-content]");

/* Пример использования шаблона в tippy */
const tippyElements = document.querySelectorAll<HTMLElement>(
  "[data-tippy-template]",
);
for (const element of tippyElements) {
  const { tippyTemplate } = element.dataset;
  const content = document.querySelector<HTMLTemplateElement>(
    `[data-template="${tippyTemplate}"]`,
  )?.content;

  tippy(element, {
    content,
  });
}

Стили

@import "tippy.js/dist/tippy.css";