Задача: сверстать адаптивную всплывающую подсказку при наведении на текст или элемент. Понадобятся знания HTML, CSS и JS.
Подсказку можно сделать и без использования сторонних библиотек, но тогда будут сложности с адаптивностью. Она может скрываться за краями экрана, если элемент на который будем наводить курсор окажется близко к краю экрана.
По этой причине будем использовать Tippy.js — это легко настраиваемая библиотека всплывающих подсказок на базе Popper.js.
Подключим библиотеку, для этого вставляем скрипт перед закрывающим тегом <body>. Скрипт должен располагаться перед собственными скриптами.
Подключаем Tippy.js на страницу
Простой пример с текстом
Рассмотрим сначала простейший пример, когда нам не нужна специфичная разметка внутри подсказки, а нужен только текст.
Подготовим HTML код подсказок, которые будем показывать.
Подсказки с текстом
Для инициализации подсказки вызовем функцию tippy() с CSS селектором, который соответствует этим элементам.
Инициализируем Tippy
А также передадим в настройки: тему, которую настроим с помощью CSS, расположение и др.
Настраиваем Tippy
Настраиваем тему Tippy
Добавим другие css стили для подсказки.
Стилизуем всплывающую подсказку Tippy
Получится что-то типа такого:
Пример с вставкой HTML кода в подсказку
Теперь рассмотрим пример с вставкой html кода внутрь всплывающей подсказки. Настроим Tippy следующим образом.
Настраиваем Tippy
Html разметка теперь будет отличаться. У нас появилась разметка подсказок, которые будут подставляться в tooltip, эту разметку нужно скрыть с помощью CSS.
Разметка
Пример можно посмотреть на CodePen:
С помощью Tippy.js можно создавать и гибко настраивать всплывающие подсказки для любых задач. Подробнее можно ознакомиться в официальной документации.
\n\n```\n\n## Простой пример с текстом\nРассмотрим сначала простейший пример, когда нам не нужна специфичная разметка внутри подсказки, а нужен только текст.\nПодготовим HTML код подсказок, которые будем показывать.\n\n\n```html\n \n \n \n \n \n```\n\nДля инициализации подсказки вызовем функцию ```tippy()``` с CSS селектором, который соответствует этим элементам.\n\n\n```js\ntippy('[data-tippy-content]');\n```\nА также передадим в настройки: тему, которую настроим с помощью CSS, расположение и др.\n\n\n```js\ntippy('[data-tippy-content]', {\n theme: 'emx',\n hideOnClick: false,\n maxWidth: 468,\n placement: 'bottom',\n});\n```\n\n\n```css\n.tippy-box[data-theme~='emx'] {\n padding: 1em 1.3em;\n font-size: 14px;\n white-space: normal;\n background-color: #303030;\n color: #fff;\n font-family: var(--font-family);\n border-radius: 0;\n}\n```\n\nДобавим другие css стили для подсказки.\n\n\n```css\n.tippy-box[data-theme~='emx'] {\n padding: 1em 1.3em;\n font-size: 14px;\n white-space: normal;\n background-color: #303030;\n color: #fff;\n font-family: var(--font-family);\n border-radius: 0;\n}\n\n.tippy-content p:last-child {\n margin-bottom: 0;\n}\n\n.tippy-content {\n padding: 0;\n text-align: center;\n}\n\n.tooltip-content__item > p:last-of-type {\n margin-bottom: 0;\n}\n\n.dark-theme .tippy-box {\n background-color: #fff;\n color: #303030;\n}\n\n.tippy-box[data-placement^=bottom]>.tippy-arrow:before {\n content: \"\";\n position: absolute;\n top: -12px;\n border: 8px solid transparent;\n border-bottom: 8px solid #303030;\n border-left: 8px solid #303030;\n}\n\n.tippy-box[data-placement^=top]>.tippy-arrow:before {\n content: \"\";\n position: absolute;\n bottom: -12px;\n border: 8px solid transparent;\n border-top: 8px solid #303030;\n border-right: 8px solid #303030;\n}\n```\n\nПолучится что-то типа такого:\n\n\n## Пример с вставкой HTML кода в подсказку\nТеперь рассмотрим пример с вставкой html кода внутрь всплывающей подсказки. Настроим Tippy следующим образом.\n\n\n```js\ntippy(\".tltp\", {\n content(reference) {\n const id = reference.getAttribute(\"data-template\");\n const template = document.getElementById(id);\n if (template) {\n return template.innerHTML;\n } else {\n return null;\n }\n },\n allowHTML: true,\n hideOnClick: false,\n maxWidth: 468,\n placement: \"bottom-end\"\n});\n```\n\nHtml разметка теперь будет отличаться. У нас появилась разметка подсказок, которые будут подставляться в tooltip, эту разметку нужно скрыть с помощью CSS.\n\n\n```html\n// Контент, на который нужно навести\n\n\n\n// Подсказки, которые будут подставляться в tooltip\n
\n \n
«Понравилась оперативная коммуникация, процессы взаимодействия, умение решать нестандартные задачи»
\n
\n
\n
«Менеджеры берут на себя ответственность и не работают бездумно»
\n
\n```\n\n\n```css\n.tltp {\n display: inline-block;\n width: 80px;\n height: 80px;\n background: #222;\n}\n\n.tooltip-content__item {\n display: none;\n}\n```\n\nПример можно посмотреть на CodePen:\n\n\nС помощью Tippy.js можно создавать и гибко настраивать всплывающие подсказки для любых задач. Подробнее можно ознакомиться в официальной документации.","headline":"Всплывающая подсказка с помощью Tippy.js","url":"https://sereja-art.ru/blog/vsplyvayushhaya-podskazka-s-pomoshhyu-tippy-js/","image":{"@type":"ImageObject","url":"https://sereja-art.ru/uploads/tippy_40011f4a22.jpg"},"description":"Показываю как сделать адаптивную всплывающую подсказку с помощью библиотеки Tippy.js","datePublished":"2024-09-14T20:04:50.656Z","publisher":{"@type":"Person","name":"Sergey Artemov","url":"https://sereja-art.ru","image":"/hero-avatar.jpg"},"author":{"@type":"Person","name":"Sergey Artemov","url":"https://sereja-art.ru","image":"/hero-avatar.jpg"}}]}