Створити Minified Tooltips в чистому CSS з Wenk

З такою дивною назвою, ви не очікуєте багато з Wenk, безкоштовно Бібліотека підказки CSS. І все ж це одна з найменших бібліотек Ви можете отримати вимірювання під 1КБ, коли згорнуто.

Wenk використовує чистий CSS з дані- * атрибути Створювати живі підказки що ви можете рестайлінгу і позицію на свій смак. Краще за все, це абсолютно безкоштовна бібліотека з вихідним кодом, доступним на GitHub.

Ці легкі підказки дуже прості для додавання до вашого веб-сайту. Вам просто потрібно Wenk.css файл додано до заголовка сторінки, які можна завантажити з репо GitHub.

Або, можна навіть додайте файл CDN яка розміщена на CDN GitHub. Ось код для цього:

Або, якщо ви є npm / bower вентилятором, ви можете встановити цей пакет від терміналу.

Теги підказки за замовчуванням не містять багато спеціальних даних. Вони дозволяють вам виберіть позицію і ширину, але ви повинні змінити CSS вручну якщо ви хочете, щоб вони були по-різному.

Наприклад, вам може знадобитися додавання стрілки CSS до підказки, яка з'являється над елементом підказки. Це досить просто створити, але вам потрібно проскакувати таблицю стилів Wenk знайти точний клас CSS розширювати.

Ось приклад деяких код за замовчуванням для підказок Wenk:

   Wenk праворуч!  

Основна цільова сторінка Wenk включає живі демонстрації що ви можете перевірити, наведіть курсор миші. Вони є основні підказки ви отримаєте, але вони ідеально підходять для бібліотеки, яка важить менше кілобайту.

Одна головна річ, яку слід розглянути підтримка браузера. Усі версії Chrome і Firefox повинні працювати нормально. Те ж саме з Opera 12+ і Opera Mini v8 +. Але IE8 і IE10 здаються мають проблеми відображення цих підказок. На щастя, їхня ринкова частка швидко падає, але це треба розглянути перед використанням.

Я до сих пір вражений, скільки ви можете зробити з такою кількістю КБ. Бібліотека Wenk є свідченням сучасного розвитку фронтендів і показує, що трохи може пройти довгий шлях.

Ви можете копати всього джерела на GitHub разом з живі демонстрації і фрагменти коду створити та створити ці підказки для вашого власного сайту.