40+ Корисни описи скрипти са ЦСС, ЈаваСцрипт и јКуери
Интересантан елемент корисничког интерфејса, описи алата (који се називају и инфотипс) чине да се мала кутија појави када показивач миша лебди изнад одређеног текста или слике са информацијама у вези са елементом који лебди изнад. У смислу корисничког искуства, описи алата пружају корисницима најбржи и најједноставнији извор информација без да кликнете на било шта.
Иако је најједноставнији начин додавања описа текста вашем ХТМЛ-у је употреба ХТМЛ ознаке или ТИТЛЕ =””, АЛТ =””. Међутим, има неких заиста цоол тоолтипс дизајнира и стилове које можете креирати помоћу ЈаваСцрипта и ЦСС-а користећи скрипте алатки. Хајде да погледамо.
ЦСС
Баллоон.цсс - Балон је ЦСС библиотека састављен са СасС и ЛЕСС да бисте приказали интерактивну подлогу. Садржај и позиција тоолтип-а се могу конфигурисати кроз података- аттрибуте. Можете приказати опис алата на левој, десној или лијевој страни. Можеш чак и додајте Емојис у садржај. Баллоон.цсс се може инсталирати преко НПМ-а и учитати са ЦДЊС-а.
Симптип - Направљен са СасС-ом који омогућава поново конфигуришите и компајлирајте код тако да одговара вашем захтеву. Позиција и садржај тоолтип-а се могу конфигурисати кроз име класе и тоолтип аттрибуте. Симптип је доступан као НПМ, пређа и Бовер пакет.
Хинт.цсс - Једна од популарних ЦСС библиотека која приказује тоолтип, Хинт.цсс користе многе популарне веб локације као што су Фиверр, Вебфлов и Тридив. За разлику од друге двије ЦСС библиотеке, Хинт.цсс користи ариа-лабел Можете да конфигуришете величину и боју кроз називе класа коришћењем БЕМ методологије. Хинт.цсс је доступан на НПМ, Бовер и ЦДЊС.
Мицротип - Још једна страшна ЦСС библиотека за креирање тоолтип-а “Приступачност” на уму, Мицротип користи ариа-лабел да држите садржај тоолтип-а и података- атрибут за конфигурисање величине и позиције тоолтип-а.
Она користи ЦСС варијаблу која вам омогућава да прилагодите тоолтип са само обичном ол 'ЦСС датотеком. ЦСС варијабле су већ подржане у многим веб и мобилним претраживачима. Мицротип је доступан као НПМ, пакет пређе и УНПкг ЦДН.
Венк - То је само 733 бајта. Супер лагана библиотека написан у супер-модерном ЦСС-у користећи ЦССНект, ЛЕСС и СЦСС тако да можете прилагодити и рекомпајлирати стилове онако како желите. Венк се може преузети са НПМ, Пређе и следећих бесплатних ЦДН услуга: равгит.цом и унпкг.цом.
Тоолтиппи - Други лагана ЦСС библиотека величине око 1 КБ. Тоолтиппи садржи неколико претходно припремљених тема за обликовање алата. Написан је са ЦСС пре-процесорима по имену Стилус. Погледајте упутство како можете проширите или прилагодите ове теме.
ЕлегантТипс - Ова библиотека долази са неколико унапред изграђене теме које се могу променити са наведеним именима класа. За разлику од других библиотека које се ослањају на ХТМЛ5 података- или ариа-лабел атрибут, ЕлегантТипс захтева додатни елемент који се додаје да се формира тоолтип. То вам омогућава додати дословно било који садржај у тоолтип иза једноставног текста.
Тоотик - Не само да ова ЦСС библиотека обезбеђује стилсхеет у ЦСС, ЛЕСС и СасС формату, већ пружа и једноставан за употребу ГУИ за прилагођавање описа алата. Можете једноставно копирати и залијепити ХТМЛ који генерира овај алат. Тако је једноставно.
ВаниллаЈС
ТиппиЈС - Поверед би Поппер.јс, ТиппиЈС долази са мноштво опција за конфигурисање тоолтипа. Можемо прилагодити анимације, стрелицу алата, ширину, величину, тему и још много тога. Такође обезбеђује Цаллбацк функције помоћу којих можете извршите функцију када је тоолтип приказан и сакривен. Ове карактеристике чине ТиппиЈС једним од наших моћних ЈаваСцрипт библиотека на нашој листи за креирање тоолтипа.
Дарсаин Тоолтип - Ова библиотека пружа основну имплементацију тоолтип-а. Ипак, он пружа опсежне опције за конфигурирање тоотип понашања, и сет имена класа за промену изгледа тоолтип-а. Тоолтип функционише добро у старијим претраживачима као што је ИЕ9 и, ако је потребно, ИЕ8 са неколико подешавања.
Бубб - Бубб може бити погодан за напредне ЈаваСцрипт кориснике. Усинг итс опсежних АПИ-ја, осим приказивања једноставног текста, можете програмски додати сложенији ХТМЛ садржај у тоолтип. То је прилично кул; можете погледати примјере докумената.
Поппер - Садржи техничку апстракцију за стварање нечега “попс”, као тоолтип, поповер и дроп-довнс. ТиппиЈС га користи као библиотеку и користи га велика имена на вебу као што су Боотстрап, Мицрософт и Атлассиан.
ИИ Тоолтип - За разлику од других библиотека, ИИ Тоолтип не захтева да додате ХТМЛ елемент или атрибуте. Он ради у потпуности са ЈаваСцрипт-ом, а садржај, положај и боје су дефинисани у објекту уместо у ХТМЛ елементу. Савршен је за употребу у комбинацији са комплетном ЈаваСцрипт веб апликацијом.
Поситион.јс - Још једна одлична изворна ЈаваСцрипт библиотека за креирање тоолтипова, Поситион.јс обезбеђује ГУИ за конфигурисање функције и једноставно копирајте и налепите генерисани код. Поситион.јс се може користити заједно са Реацт.јс или Вуе.јс.
Безет Тоолтип - Ова библиотека пружа 14 опција за приказ аларма; као што је на јел тако, лево, дно, лево-центар, десни крај, боттом-центер, итд. Поврх тога, довољно је паметан да може подесите положај тоолтип-а на основу расположивог простора који окружује опис алата. Погледајте демо.
МоусеТип - Ова ЈаваСцртипт библиотека ће креирати а тоолтип који ће се померати дуж позиције курсора. Тоолтип је конфигурисан са нестандардним моусетип- уместо да користи ХТМЛ5 података- аттрибуте. Моусетип је доступан као НПМ модул.
Интернетипс - Сасвим слично МоусетТип-у, тоолтипу који генерише ова библиотека прати позицију курсора. Све је конфигурисано преко ЈаваСцрипт објекта уместо ХТМЛ-а и Атрибути су такође направљени за модерне претраживаче. Лаган је и брз.
МТип - ЈаваСцрипт библиотека за Тоолтип са одлична компатибилност претраживача. То је компатибилан са ИЕ8, потпуно прилагодљив кроз опције, и можете додати Тоолтип за било који елемент чак и на имг (елемент слике).
Бубблесее - лагана ЈаваСцрипт библиотека која пружа једноставну функционалност “тоолтип”. Лако је користити ЈаваСцрипт библиотеку без компликованих опција за прилагођавање излаза. Датотека Сасс је обезбеђена ако желите да промените изглед тоолтип-а. Погледајте демо.
Типфи - Направљен са модерном ЈаваСцрипт синтаксом, ЕС6, Типфи је величине само 2 КБ. Библиотека нуди две верзије датотека: типфи.мин.јс обезбеђивањем скрипте модерна ЕС6 синтакса, и типфи.ес5.мин.јс ако вам је потребна компатибилност са старијим прегледачима. Користи података- да бисте прилагодили опис алата; тхе дата-типфи-страна, на пример, користи се за подешавање правца алата и коришћење дата-типфи-тект атрибут за додавање садржаја тоолтип-а.
јКуери
Тоолтипстер - Ова библиотека пружа опширне опције за прилагођавање готово свега као што је тема, анимација, подршка за додир, садржај, окидач отворен и затворен, итд. Такође пружа прилагођени слушач догађаја и повратне позиве који омогућава програмерима да прошире тоолтип помоћу прилагођених функција. Такође, као јКуери плугин, тоолтип би функционисао у старијим претраживачима као што је ИЕ6 у зависности од јКуери верзије се користи.
Про врх - Још један опсежан јКуери плугин, Протип подржава 49 позиција, ХТМЛ за садржај алата, подршку за иконе, прилагођене повратне позиве, и много више. Протип пружа ГУИ који вам омогућава да лако прилагодите тоолтип.
ПоверТип - Овај плугин јКуери такође доноси опције и АПИ-јеве који програмерима нуде различите начине за имплементацију описа алата. Подржава навигација помоћу тастатуре; када се попуп појављује приликом навигације елемената са Таб тастатура. ПовереТип ис доступан као НПМ модул. Може се користити са РекуиреЈС и Бровсерифи.
Аццессибле Ариа Тоолтип - ЈКуери додатак са уграђеном функцијом приступачности, представља алатку дизајниран за приказ дијалог бок-а са насловом, вишелинијским текстом и дугме за затварање. То је један од наших на нашој листи.
ТипсЈС - Једноставан јКуери плугин, али ипак доноси доста карактеристика. Тхе Садржај описа алата је подешен са тоолтип аттрибуте. Штавише, можемо и да умотамо садржај са специјалним знаковима да бисмо форматирали садржај сличан Маркдовн форматирању. Можемо користити * да би садржај био подебљан, ~ за курзив и ^ за наслов.
Дарк Тоолтип - Ова библиотека пружа неке заиста корисне функције за покретање алатке. На пример, можемо додати а буттон за потврду - Да и Не, затамните позадину док се приказује тоолтип и додајте ХТМЛ елементе на садржај. Мислим да би требало да погледате демо страницу.
Ариа Тоолтип - Још један тоолтип са уграђеном значајком приступачности, овај јКуери плугин је компатибилан са ВАИ-АРИА 1.1. Одговара на начин који можете пружају различите конфигурације за различите величине приказа. Ариа Тоолтип је доступна као НПМ модул под називом т-ариа-тоолтип.
Тоолбар.јс - Док други јКуери плугин може приказивати само једноставни текст или ХТМЛ садржај у оквиру алата, ово јКуери плугин креира траку са алаткама. Тоолтип ће садржати две или више веза са иконом која ће типично извршити радњу клик, као било која трака са алаткама. Погледајте документацију и примере.
ВуеЈС
В-Тоолтип - В-Тоолтип је компонента Вуе.јс коју покреће Поппер.јс испод хаубе. Она обезбеђује именована нова директива в-тоолтип који се може додати било ком елементу да би се створио тоолтип. Тхе в-тоолтип може да садржи садржај описа алата или Опције. Осим обичаја в-тоолтип директива, такође можете додати тоолтип са в-поповер саставни део. Са овом компонентом, можете додајте сложенији садржај у тоолтип са компонентом Вуе.јс или ХТМЛ-ом.
Вуе-Булма Тоолтип - Компонента Вуе.јс за креирање тоолтип-а заснованог на Булма УИ оквиру. Ова библиотека је део компоненте Вуе Булме. Али Компонента тоолтип је доступна као НПМ модул под називом вуе-булма-тоолтип то можете користити као самосталне компоненте.
Вуе-Дирецтиве-Тоолтип - Све у свему, сличан је В-Тоолтип компоненти базираној на Поппер.јс и нуди исту директиву в-тоолтип. Међутим, чини се да то не пружа в-поповер саставни део.
Вуе-Типпи - Ова библиотека омотава Типпи.јс у Вуе.јс компоненту. Садржи прилагођену Вуе.јс директиву в-типпи која ради као ХТМЛ атрибут; можемо додати садржај за тоолтип или опције да га прилагодимо. То такође чини а прилагођена компонента Вуе.јс на садржају тоолтипа помоћу хтмл опција.
ВуеЈС-Поповер - Прилагођени Вуе.јс са прилагођеном директивом в-поповер и две прилагођене компоненте наиме
Вуе-Хинт - Вуе.јс плугин који омотава Хинт.цсс. Функције додатка в-хинт-цсс директива за додавање описа алата. То доноси исти скуп опција као Хинт.цсс, тако да их можете додати као ЈаваСцрипт објекат или Вуе.јс модификатор.
РеацтЈС
Реацт Јоириде - Компонента Реацт за приказ скупа описа алата који ће упутите нове кориснике да се упознају са вашом новом апликацијом.
Реацт Флоатер - Ова библиотека облаже Поппер.јс у Реацт компоненту по имену Флоатер, тако да има исте сјајне могућности као и Флоатер. Можете додати тоолтип и попуп, а можете и играјте се са овом компонентом кроз овај сандбок.
Реацт Аутотип - Једноставна Реацт компонента са функцијом аутоматског позиционирања, еацт Аутотип ће аутоматски подешава позицију тоолтипа када се слободни простор око њега промени.
Реацт Типпи - Изграђен на врху Типпи.јс и Поповер.јс. Ова библиотека представља а Тоолтип компонента можете укључити у своју апликацију Реацт.
Реацт Хинт - А Реацт цомпонент продужује Хинт.цсс. Компоненте додају неколико функција које нису доступне у Хинт.цсс као што је ауто позиција, кашњење и функција повратног позива.
Више
Ембер Тоолтипс - Ембер.јс компонента за креирање описа алата, она је изграђена на врху Поппер.јс. Компонента је такође дизајнирана тако да има на уму приступачност и стално се побољшава у складу са око 508 усаглашености у овом питању.
Д3 Тип - плугин за Д3.јс. Д3.јс је ЈаваСцрипт библиотека за визуелизацију података као што су графикони, мапе, дијаграми, итд. Овај додатак вам омогућава да прикажете тоолтип на врху ових података.
