Всплывающие подсказки на 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; }

Variable Description Default Value
--microtip-transition-duration Устанавливает время анимации тултипа .18s
--microtip-transition-delay Задержка появления всплывающей подсказки 0s
--microtip-transition-easing Тип анимации для появления тултипа ease-in-out
--microtip-font-size Размер шрифта во всплывающей подсказке 13px
--microtip-font-weight font-weight для текста тултипа normal
--microtip-text-transform text-transform для текста none

Проект на GitHub

Смотрите также

10 Лучших CSS сниппетов
8 мокапов для дизайна флаеров
Мокапы картонных бирок (Label tag mockup)

Группа Вконтакте