Всплывающая подсказка с помощью Tippy.js

14 сент. 2024 г.

3 минуты525 слов

Задача: сверстать адаптивную всплывающую подсказку при наведении на текст или элемент. Понадобятся знания HTML, CSS и JS.

Подсказку можно сделать и без использования сторонних библиотек, но тогда будут сложности с адаптивностью. Она может скрываться за краями экрана, если элемент на который будем наводить курсор окажется близко к краю экрана.

По этой причине будем использовать Tippy.js — это легко настраиваемая библиотека всплывающих подсказок на базе Popper.js.

Подключим библиотеку, для этого вставляем скрипт перед закрывающим тегом <body>. Скрипт должен располагаться перед собственными скриптами.

Подключаем Tippy.js на страницу

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Простой пример с текстом

Рассмотрим сначала простейший пример, когда нам не нужна специфичная разметка внутри подсказки, а нужен только текст. Подготовим HTML код подсказок, которые будем показывать.

Подсказки с текстом

      <div class="tooltip-team person-2" data-tippy-content="🦅 в блог напишу"></div>
      <div class="tooltip-team person-3" data-tippy-content="учусь новому 💪"></div>
      <div class="tooltip-team person-4" data-tippy-content="расскажу-покажу 🎸"></div>
      <div class="tooltip-team person-5" data-tippy-content="навёрстываю упущенное"></div>
      <div class="tooltip-team person-6" data-tippy-content="World's BEST BOSS 👑"></div>

Для инициализации подсказки вызовем функцию tippy() с CSS селектором, который соответствует этим элементам.

Инициализируем Tippy

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

А также передадим в настройки: тему, которую настроим с помощью CSS, расположение и др.

Настраиваем Tippy

tippy('[data-tippy-content]', {
  theme: 'emx',
  hideOnClick: false,
  maxWidth: 468,
  placement: 'bottom',
});

Настраиваем тему Tippy

.tippy-box[data-theme~='emx'] {
  padding: 1em 1.3em;
  font-size: 14px;
  white-space: normal;
  background-color: #303030;
  color: #fff;
  font-family: var(--font-family);
  border-radius: 0;
}

Добавим другие css стили для подсказки.

Стилизуем всплывающую подсказку Tippy

.tippy-box[data-theme~='emx'] {
  padding: 1em 1.3em;
  font-size: 14px;
  white-space: normal;
  background-color: #303030;
  color: #fff;
  font-family: var(--font-family);
  border-radius: 0;
}
 
.tippy-content p:last-child {
  margin-bottom: 0;
}
 
.tippy-content {
  padding: 0;
  text-align: center;
}
 
.tooltip-content__item > p:last-of-type {
  margin-bottom: 0;
}
 
.dark-theme .tippy-box {
  background-color: #fff;
  color: #303030;
}
 
.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
  content: "";
  position: absolute;
  top: -12px;
  border: 8px solid transparent;
  border-bottom: 8px solid #303030;
  border-left: 8px solid #303030;
}
 
.tippy-box[data-placement^=top]>.tippy-arrow:before {
  content: "";
  position: absolute;
  bottom: -12px;
  border: 8px solid transparent;
  border-top: 8px solid #303030;
  border-right: 8px solid #303030;
}

Получится что-то типа такого:

Пример с вставкой HTML кода в подсказку

Теперь рассмотрим пример с вставкой html кода внутрь всплывающей подсказки. Настроим Tippy следующим образом.

Настраиваем Tippy

tippy(".tltp", {
  content(reference) {
    const id = reference.getAttribute("data-template");
    const template = document.getElementById(id);
    if (template) {
      return template.innerHTML;
    } else {
      return null;
    }
  },
  allowHTML: true,
  hideOnClick: false,
  maxWidth: 468,
  placement: "bottom-end"
});

Html разметка теперь будет отличаться. У нас появилась разметка подсказок, которые будут подставляться в tooltip, эту разметку нужно скрыть с помощью CSS.

Разметка

// Контент, на который нужно навести
<div class="tltp" data-template="otkr"></div>
<div class="tltp" data-template="skol"></div>
 
// Подсказки, которые будут подставляться в tooltip
<div class="tooltip-content__item" id="otkr">
  <img style="width: 100%;" src="https://sereja-art.ru/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Furban_samurai_1200x600_ccbdb36462.jpg&w=640&q=75" alt="">
  <p>&laquo;Понравилась оперативная коммуникация, процессы взаимодействия, умение решать нестандартные задачи&raquo;</p>
</div>
<div class="tooltip-content__item" id="skol">
  <p>&laquo;Менеджеры берут на&nbsp;себя ответственность и&nbsp;не&nbsp;работают бездумно&raquo;</p>
</div>

.tltp {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #222;
}
 
.tooltip-content__item {
  display: none;
}

Пример можно посмотреть на CodePen:

С помощью Tippy.js можно создавать и гибко настраивать всплывающие подсказки для любых задач. Подробнее можно ознакомиться в официальной документации.