Начална » Toolkit » Microtip - CSS Tooltip библиотека с функциите за достъпност

    Microtip - CSS Tooltip библиотека с функциите за достъпност

    Можете да направите бързо търсене в GitHub, за да намерите десетки библиотеки с персонализирани подсказки. И изглежда, че новите удариха в интернет всеки месец.

    Microtip е уникален ресурс, тъй като работи на чисти CSS подсказки, предлага персонализирана естетика и използва изходния код, напълно достъпна за всички потребители.

    Ако никога не сте мислили много за достъпността, Microtip може да промени мнението ви. Това е идеалната комбинация от чист дизайн с функционалност за всички устройства, всички браузъри и за потребители с големи увреждания.

    На началната страница ще намерите връзка за изтегляне към библиотеката на Microtip заедно с куп демонстрации на кодове.

    Можете да получите тази настройка чрез мениджър на пакети, директно изтегляне или чрез изтегляне директно от CDN. То идва с един CSS файл и това е основно всичко, от което се нуждаете.

    След като добавите Microtip към страницата си, можете да започнете да добавяте подсказки към елементите на страницата. Това са напълно съвместими с WAI така че те напълно отговарят на съвременните стандарти за достъпност.

    Ето примерен код на подсказка, прикрепен към елемент на бутон с персонализирана позиция:

    Няма много код правилно?

    Тази библиотека е изключително лека с общо 1KB. Това е просто лудост, като се има предвид колко ще получите с тези подсказки.

    Собствените CSS свойства могат да бъдат предавани чрез атрибути на HTML, за да се определи размерът на шрифта, стила на преход, облекчаването и много други настройки.

    Можете също презапишете CSS директно, за да направите подсказки по-големи с различни цветове или шрифтове.

    Разгледайте секцията за персонализиране на главната страница за повече подробности. Всичко протича през HTML и CSS, така че не е нужно всяко знание за скриптове да се получи тази работа.

    Microtip е супер лесна за настройка и персонализиране така че ако поне знаете основното кодиране на frontend, ще се оправите.

    Но погледнете репо GitHub за повече информация за настройка и за да вземете копие от таблицата със стилове.

    Ако имате въпроси или предложения за нови функции, можете да пуснете линия на създателя на Twitter @_ighosh.