40+ Полезни подсказки Скриптове с CSS, JavaScript и jQuery

Интересен елемент на потребителския интерфейс, подсказки (наричани още infotips) правят малка кутия, когато се появи курсорът на мишката се намира над определен текст или изображение с информация относно елемента, който се върти над. По отношение на потребителския опит, подсказките предоставят на потребителите най-бързия и лесен източник на информация без да се налага да натискате нищо.

Въпреки че най-простият начин да добавите подсказки към текста, е да използвате HTML етикет или TITLE =””, ALT =””. Въпреки това, има някои наистина готино подсказки проекти и стилове, които можете да създадете с JavaScript и CSS използване на подсказки скриптове. Нека погледнем.

CSS

Balloon.css - Балонът е CSS библиотека съставен от SasS и LESS за показване на интерактивна подсказка. Съдържанието и позицията на подсказката се конфигурират чрез данни- атрибут. Можете да покажете подсказка в ляво, дясно или ляво-дясно. Можете дори добавете Emojis към съдържанието. Balloon.css може да се инсталира чрез NPM и да се зареди от CDNJS.

Simptip - Направено с SasS, което позволява преконфигурирайте и прекомпилирайте кода, за да отговаря на вашите изисквания. Позицията и съдържанието на подсказката се конфигурират чрез името на класа и данни подсказка атрибут. Simptip е наличен като NPM, прежда и пакет Bower.

Hint.css - Една от най-популярните CSS библиотеки за показване на подсказка, Hint.css се използва от много популярни сайтове като Fiverr, Webflow и Tridiv. За разлика от другите две библиотеки на CSS, Hint.css използва ария-етикет Можете да конфигурирате размера и цвета чрез имената на класовете методология на БЕМ. Hint.css е на разположение на NPM, Bower и CDNJS.

вкар- - Друга страхотна CSS библиотека за създаване на подсказка “Достъпност” предвид, Microtip употреби ария-етикет за да задържите съдържанието на подсказката и данни- атрибут за конфигуриране на размера и позицията на подсказката.

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

Wenk - Това е само 733 байта. Супер лека библиотека написан на супер-модерен CSS, използващ CSSNext, LESS и SCSS така можете да персонализирате и прекомпилирате стиловете така, както искате. Wenk може да бъде изтеглен от НПМ, Прежди и следните безплатни CDN услуги: rawgit.com и unpkg.com.

Tooltippy - още лека CSS библиотека с размер около 1 KB. Tooltippy включва няколко предварително направени теми за оформяне на подсказката. Той е написан с CSS pre-processors на име Stylus. Вижте инструкцията за това как можете разширявате или персонализирате тези теми.

ElegantTips - Тази библиотека идва с няколко предварително изградени теми които могат да се променят с предоставените имена на класове. За разлика от другите библиотеки, които разчитат на HTML5 данни- или ария-етикет атрибут, ElegantTips изисква добавяне на допълнителен елемент за формиране на подсказка. Това ви позволява добавете буквално всяко съдържание към подсказката извън обикновения текст.

Tootik - Не само, че тази CSS библиотека предоставя стиловата таблица в CSS, LESS и SasS формат, тя също така предоставя лесен за използване GUI за персонализиране на подсказка. Можете просто да копирате и поставите генерирания от този инструмент HTML. Толкова е просто.

VanillaJS

TippyJS - Осъществено от Popper.js, TippyJS идва с изобилие от опции за конфигуриране на подсказка. Можем да персонализираме анимациите, стрелката с подсказки, ширината, размера, темата и много повече. Той също така предоставя функции за обратно повикване, с които можете изпълни функция, когато подсказката е показана и скрита. Тези функции правят TippyJS една от нашите мощни JavaScript библиотеки в нашия списък, за да създадете подсказка.

Подсказка за Darsain - Тази библиотека осигурява основната реализация на подсказка. Въпреки това, той предоставя обширни опции за конфигуриране на поведението до тотип и a набор от имена на класове, за да промените вида на подсказката. Подсказката работи добре в по-старите браузъри като IE9 и, ако е необходимо, IE8 с няколко корекции.

Bubb - Bubb може да е подходящ за напреднали потребители на JavaScript. Използване на неговия обширни приложни програмни интерфейси (API), освен показване на прост текст, можете програмно да добавите по-сложно HTML съдържание към подсказката. Това е доста готино; можете да препращате към документите примерите.

пукало за пуканки - Съдържа техническа абстракция, за да създаде нещо такова “пукоти”, като подсказка, popover и падащи списъци. TippyJS я използва като основа на библиотеката и се използва от големи имена в мрежата като Bootstrap, Microsoft и Atlassian.

YY Подсказка - За разлика от другите библиотеки, YY Tooltip не изисква да добавяте HTML елемент или атрибути. Тя работи изцяло с JavaScript, а съдържанието, позицията и цветовете са дефинирани в обект вместо в елемент HTML. Той е идеален за използване във връзка с пълноценно уеб приложение на JavaScript.

Position.js - Друга отлична родна JavaScript библиотека за създаване на подсказки, Position.js предоставя GUI за конфигуриране на функцията и просто копиране и поставяне на генерирания там код. Position.js може да се използва във връзка с React.js или Vue.js.

Безжична подсказка - Тази библиотека предлага 14 опции за показване на подсказка; като например прав, наляво, дъно, ляв център, десния край, отдолу център, Освен това, той също е достатъчно умен, за да може коригирайте позицията на подсказката според наличното пространство около подсказката. Вижте демото.

MouseTip - Тази библиотека на JavaScrtipt ще създаде подсказка, която ще се движи по позицията на курсора. Подсказката е конфигурирана с нестандартно mousetip- атрибут вместо да използва HTML5 данни- атрибут. Mousetip е наличен като NPM модул.

Internetips - Доста подобен на MousetTip, подсказка, генерирана от тази библиотека следва позицията на курсора. Всичко е конфигурирано чрез JavaScript Object вместо HTML и атрибутите са създадени и за модерни браузъри. Той е лек и бърз.

MTip - Библиотека на JavaScript за подсказка с отлична съвместимост с браузъра. Той е съвместим с IE8, напълно приспособим чрез Опции, и можете да добавите Tooltip към всеки елемент дори на IMG (елемент на изображение).

Bubblesee - лека JavaScript библиотека, която осигурява лесна функционалност на a “подсказка”. Лесно е да използвате JavaScript библиотека без сложни опции, за да персонализирате изхода. Файлът Sass се предоставя, ако искате да промените вида на подсказката. Вижте демото.

Tipfy - Създаден с модерен синтаксис на JavaScript, ES6, Tipfy е с размер само 2 КБ. Библиотеката предлага две версии на файлове: tipfy.min.js предоставяне на скрипта с модерен синтаксис ES6, и tipfy.es5.min.js ако имате нужда от съвместимост с по-старите браузъри. Той използва данни- атрибут за персонализиране на подсказката; на данни tipfy страна, например, се използва за задаване на посоката на инструмента и използване данни tipfy текст атрибут за добавяне на съдържанието на подсказка.

JQuery

Tooltipster - Тази библиотека предлага обширни опции за персонализиране на почти всичко, като например тема, анимация, поддръжка на допир, съдържание, спусък за отваряне и затваряне, Той също така осигурява персонализиран слушател на събития и обратно обаждане, позволявайки на разработчиците да разширят подсказката с потребителски функции. Също така, като JQuery плъгин, на tooltip ще работи в по-стари браузър като IE6 в зависимост от jQuery версията използван.

Protip - Друг обширен jQuery плъгин, Protip поддържа 49 позиции, HTML за съдържанието на подсказки, поддръжка на икони, персонализирани обратни обаждания, и много повече. Protip осигурява графичен интерфейс, който ви позволява лесно да персонализирате подсказката.

POWERTIP - Този плъгин jQuery също носи Опции и приложни програмни интерфейси (API), които предоставят на разработчиците няколко различни начина за внедряване на подсказки. Той поддържа навигация с клавиатура; извеждането на изскачащия прозорец при навигация на елементи с Раздел клавиатура. PowereTip е на разположение като модул NPM. Може да се използва с RequireJS и Browserify.

Достъпни Aria Tooltip - JQuery плъгин с вградена функция за достъпност, подсказка е предназначен за показване на диалогов прозорец със заглавие, многоредов текст и бутон за затваряне. Той е един от неговите в нашия списък.

TipsJS - А просто jQuery плъгин, но тя носи доста отличителни черти. Най- съдържанието на подсказка е зададено с a данни подсказка атрибут. Нещо повече, ние можем да обгърнем съдържанието със специални знаци, за да форматираме съдържанието, подобно на Markdown форматирането. Можем да използваме * да направим съдържанието получер, ~ за курсив, и ^ за заглавие.

Тъмна подсказка - Тази библиотека предоставя някои наистина полезни функции за включване на подсказка. Например можем да добавим a бутона за потвърждение - Да и Не, затъмняване на фона при показване на подсказка и добавяне на HTML елементи към съдържанието. Мисля, че наистина трябва да проверите демо страницата.

Aria Tooltip - Друга подсказка с вградена функция за достъпност, този плъгин jQuery е съвместим с WAI-ARIA 1.1. Той е отзивчив по начин, който можете предоставят различни конфигурации за различни размери на екрана за изглед. Aria Tooltip е достъпна като NPM модул на име т-ария-подсказка.

Toolbar.js - Докато другият плъгин на jQuery може да показва само текстово или HTML съдържание в подсказка, това jQuery plugin създава лента с инструменти. Подсказка ще съдържа две или повече връзки с икона, която обикновено изпълнява действие кликване, като всяка лента с инструменти. Вижте документацията и примерите.

VueJS

V-Подсказка - V-Tooltip е компонент на Vue.js, задвижван от Popper.js под капака. Той осигурява: a новата директива на име V-подсказка които могат да бъдат добавени към всеки елемент, за да създадете подсказка. Най- V-подсказка може да съдържа съдържанието на подсказката или Опциите. Освен обичая V-подсказка директивата, можете също да добавите подсказка с V-изскачащ компонент. С този компонент можете добавете по-сложно съдържание в подсказката с компонент Vue.js или HTML.

Подсказка на Vue-Bulma - Компонент Vue.js за създаване на подсказка, базирана на UI Framework на Bulma. Тази библиотека е част от компонента на Vue Bulma. Но, компонент подсказка е на разположение като NPM модул на име вю-Bulma-подсказка че можете да го използвате като самостоятелни компоненти.

Vue-директива-Подсказка - Като цяло това е подобно на V-Tooltip компонент на базата на Popper.js и осигурява същата наречена наречена V-подсказка. Въпреки това, изглежда, че не осигурява V-изскачащ компонент.

Vue-Tippy - Тази библиотека обгръща Tippy.js в компонент Vue.js. Той разполага с персонализирана Vue.js директива, наречена V-Tippy който работи като HTML атрибут; можем да добавим съдържание за подсказка или опции за персонализиране. Той също така прави а персонализиран компонент Vue.js в съдържанието на подсказката чрез HTML опция.

VueJS-изскачащ - По избор се нарича персонализирана Vue.js с персонализирана директива V-изскачащ и два потребителски компонента, а именно и осигуряване на гъвкавост за разработчиците да добавят подсказки в приложението Vue.js.

Vue-Съвет - Vue.js плъгин, който обгръща Hint.css. Функциите на плъгина V-намек-CSS директива за добавяне на подсказка. То носи същия набор от опции като Hint.css, така че можете да ги добавите като JavaScript обект или Vue.js модификатор.

ReactJS

Реагирайте на Джойрид - A React компонент за показване на набор от подсказки, които ще насочете новите потребители да се запознаят с новото ви приложение.

Реагирайте поплавъка - Тази библиотека обгръща Popper.js в компонент React, наречен Floater, така че той има същите големи възможности като Floater. Можете да добавите подсказка и изскачащи прозорци, а също така можете играе с този компонент през тази пясъчница.

Реагирайте Autotip - Един прост реагиращ компонент с функцията за автоматично позициониране автоматично коригира позицията на подсказката когато наличното пространство около него се промени.

Реагирайте Типи - Построен върху Tippy.js и Popover.js. Тази библиотека въвежда a Подсказка компонент можете да включите във вашето приложение React.

Реагирайте намек - Реактивен компонент, разширяващ Hint.css. Компонентите добавят няколко функции, които не са налични в Hint.css като например автоматично позициониране, закъснение и функция за обратно извикване.

| Повече ▼

Умни подсказки - Компонент Ember.js за създаване на пояснения, той е изграден върху Popper.js. Компонентът също е проектиран с мисъл за достъпност и продължава да се подобрява, за да отговаря на изискванията за около 508 по този въпрос.

D3 Съвет - плъгин D3.js. D3.js е JavaScript библиотека за визуализация на данни като диаграми, карти, диаграми и т.н. Този плъгин ви позволява да показвате подсказка в началото на тези данни.