Всплывающие подсказки на CSS. Библиотека microtip.css

Представляем вашему вниманию отличную легковесную css библиотеку microtip.css.
Библиотека предназначена для создания всплывающих подсказок на любых элементах сайта

Установка

npm

npm install microtip

yarn

yarn add microtip

CDN

https://unpkg.com/microtip/microtip.css

Прямая загрузка

curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css

Подключение

PostCSS

@import 'microtip';

Webpack

import microtip from 'microtip/microtip.css'

SCSS

@import 'microtip/microtip';

HTML

<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css">

Использование

Использовать данную библиотеку очень просто. Достаточно добавить атртибуты aria-label и role="tooltip" к элементу, которому требуется тултип. Текст сообщения задается в атртибуте aria-label="Ваш текст". Пример с позиционированием всплывающей подсказки:

 <button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

Позиционирование всплывающих подсказок

Данная библиотека позволяет выбирать местоположения для tooltip. Это решается добавлением атртибута data-microtip-position. Данный атрибут принимает следующие параметры: top, top-left, top-right, bottom, bottom-left, bottom-right, left and right.

Например:

 <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">

Модификаторы размера

Изначально размер тултипа задается в зависимости от расположенного в нем текста. Библиотека позволяет дополнительно задать размер тултипа путем добавления data-microtip-size. Данный аттрибут принимает следующие параметры: small, medium, large, fit

Пример:

 <button aria-label="This is a decently long text!" data-microtip-position="top-left" data-microtip-size="medium" role="tooltip">

Примечание - аттрибут fit установит ширину подсказки - такую же как и ширина элемента. Данный способо работает только с позиционированием top и bottom

Кастомизация

Библиотека microtip позволяет изменять параметры своей библиотеки:

Пример::root { --microtip-transition-duration: 0.5s; --microtip-transition-delay: 1s; --microtip-transition-easing: ease-out; --microtip-font-size: 13px; --microtip-font-weight: bold; --microtip-text-transform: uppercase; }Также допустима кастомизация microtip для одного элемента: .button { --microtip-transition-duration: 0.2s; --microtip-transition-delay: 0s; --microtip-transition-easing: ease-in-out; }

Проект на GitHub