Создавайте миниатюрные подсказки в чистом CSS с Wenk

С таким странным именем вы не ожидаете многого от Венка, Бесплатный Библиотека подсказок CSS. Все же это одна из самых маленьких библиотек Вы можете получить измерения менее 1 КБ, когда GZIPP.

Венк использует чистый CSS с данные-* атрибуты создавать живые подсказки что вы можете изменить стиль и положение по своему вкусу. Лучше всего, это абсолютно бесплатная библиотека с исходным кодом, доступная на GitHub.

Эти легкие всплывающие подсказки очень просто добавить на ваш сайт. Вам просто нужно Wenk.css файл добавлен в заголовок вашей страницы, которую вы можете скачать с репозитория GitHub.

Или вы могли бы даже добавить файл CDN который размещен на CDN GitHub. Вот код для этого:

Или, если вы поклонник npm / bower, вы можете установить этот пакет из терминала.

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

Например, вы можете захотеть добавить стрелку CSS к всплывающей подсказке, которая появляется над элементом подсказки. Это довольно просто создать, но вам нужно будет просмотреть таблицу стилей Wenk, чтобы найти точный класс CSS расширить.

Вот образец некоторых код по умолчанию для подсказок Wenk:

   Венк направо!  

Основная целевая страница Wenk включает в себя живые демо что вы можете проверить, зависнув. Это самые основные подсказки вы получите, но они идеально подходят для библиотеки, которая весит менее килобайта.

Одна важная вещь для рассмотрения поддержка браузера. Все версии Chrome и Firefox должно работать нормально. То же самое с Opera 12+ и Opera Mini v8 +. Но IE8 и IE10, кажется, иметь проблему рендеринг этих подсказок. К счастью, их доля на рынке быстро падает, но перед использованием.

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

Вы можете копать в весь источник на GitHub вместе с живые демо а также фрагменты кода настроить и создать эти подсказки для вашего собственного сайта.