40+ Noderīgi rīku padomi Skripti ar CSS, JavaScript un jQuery
Interesants lietotāja interfeisa elements, rīku padomi (saukti arī par “infotips”) veido nelielu lodziņu, kad parādās peles kursors tiek novietots virs noteiktā teksta vai attēla ar informāciju par elementu, kas tiek pārspīlēts. Runājot par lietotāju pieredzi, rīku padomi sniedz lietotājiem ātrāko un vienkāršāko informācijas avotu bez nepieciešamības noklikšķināt neko.
Lai gan vienkāršākais veids, kā pievienot teksta padomus, ir izmantot HTML tagu vai TITLE =””, ALT =””. Tomēr ir dažas tiešām atdzist rīku padomus un stilus, kurus var izveidot ar JavaScript un CSS izmantojot rīku padomu skriptus. Paskatīsimies.
CSS
Balloon.css - Balons ir CSS bibliotēka sastāv no SasS un LESS lai parādītu interaktīvu rīku padomu. Tooltip saturs un stāvoklis ir konfigurējams caur datus- atribūts. Jūs varat parādīt rīku padomu kreisajā, labajā vai kreisajā labajā pusē. Jūs pat varat pievienojiet Emojis saturam. Balloon.css var uzstādīt, izmantojot NPM, vai arī ielādēt to no CDNJS.
Simptip - Izgatavots ar SasS, kas ļauj pārkonfigurēt un atkārtoti kompilēt kodu, lai tas atbilstu jūsu prasībām. Tooltip pozīcija un saturs ir konfigurējams, izmantojot klases nosaukumu un datu rīks atribūts. Simptip ir pieejams kā NPM, dzija un Bower pakete.
Hint.css - Viena no populārākajām CSS bibliotēkām, lai parādītu rīku padomu, Hint.css izmanto daudzas populāras tīmekļa vietnes, piemēram, Fiverr, Webflow un Tridiv. Atšķirībā no pārējām divām CSS bibliotēkām, Hint.css izmanto aria-label Jūs varat konfigurēt lielumu un krāsu, izmantojot klases nosaukumus izmantojot BEM metodiku. Hint.css ir pieejams NPM, Bower un CDNJS.
Microtip - Vēl viena lieliska CSS bibliotēka, lai izveidotu ar darbarīku izveidotu rīku “Pieejamība” prātā, Microtip izmanto aria-label turēt rīkjoslas saturu un datus- atribūts, lai konfigurētu rīka padoma lielumu un pozīciju.
Tas izmanto CSS mainīgo, kas ļauj pielāgot rīku padomu ar vienkāršu ol 'CSS failu. CSS mainīgie jau ir atbalstīti daudzās tīmekļa un mobilajās pārlūkprogrammās. Microtip ir pieejams kā NPM, dzijas pakotne un UNPkg CDN.
Wenk - Tas ir tikai 733 baiti. Ļoti viegla bibliotēka rakstīts super-modernā CSS, izmantojot CSSNext, LESS un SCSS tā var pielāgot un pārvērst stilus tā, kā vēlaties. Wenk var lejupielādēt no NPM, dzijas un šādiem bezmaksas CDN pakalpojumiem: rawgit.com un unpkg.com.
Rīki - Vēl viens viegla CSS bibliotēka ir aptuveni 1 KB lieluma. Tooltippy ietver vairākas iepriekš izveidotas tēmas, lai veidotu rīku padomu. Tas ir rakstīts ar CSS priekšapstrādātājiem Stylus. Skatiet norādījumus par to, kā jūs varat paplašināt vai pielāgot šīs tēmas.
Elegantie zibspuldzes - Šī bibliotēka nāk ar dažiem iepriekš izveidotas tēmas kas var tikt mainīts ar sniegtajiem klases nosaukumiem. Atšķirībā no citām bibliotēkām, kas balstās uz HTML5 datus- vai aria-label atribūtam, ElegantTips pieprasa papildu elementu, kas pievienots, lai izveidotu rīku padomu. Tas ļauj jums pievienojiet burtiski jebkuru saturu rīkam, kas pārsniedz vienkāršu tekstu.
Tootik - Ne tikai tas, ka šī CSS bibliotēka nodrošina veidlapu CSS, LESS un SasS formātā, tā arī nodrošina viegli lietojams GUI, lai pielāgotu rīku padomu. Jūs varat vienkārši kopēt un ielīmēt šī rīka ģenerēto HTML. Tas ir tik vienkārši.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS nāk ar iespējas, lai konfigurētu rīku padomu. Mēs varam pielāgot animācijas, rīkjoslas bultiņu, platumu, lielumu, tēmu un daudz ko citu. Tā nodrošina arī atzvanīšanas funkcijas, ar kurām varat izpildiet funkciju, kad tiek parādīts un paslēpts rīku padoms. Šīs funkcijas padara TippyJS par vienu no mūsu spēcīgajām JavaScript bibliotēkām mūsu sarakstā, lai izveidotu rīku padomu.
Darsain Tooltip - Šī bibliotēka nodrošina rīka padoma pamatu īstenošanu. Tomēr tā nodrošina plašas iespējas, lai konfigurētu ražas uzvedību, un a Klases nosaukumu kopa, lai mainītu rīkjoslu izskatu. Rīku padoms darbojas labi vecākā pārlūkprogrammā, piemēram, IE9 un, ja nepieciešams, IE8 ar dažiem pielāgojumiem.
Bubb - Bubb varētu būt labi piemērots progresīviem JavaScript lietotājiem. Izmantojot tās plašas API, izņemot vienkārša teksta attēlošanu, varat programmiski pievienot sarežģītāku HTML saturu rīku padevei. Tas ir diezgan forši; jūs varat atsaukties uz dokumentiem piemēriem.
Popper - Satur tehnisku abstrakciju, lai radītu kaut ko tādu “NOP”, piemēram, rīku padoms, popover un nolaižamie. TippyJS to izmanto kā bibliotēkas fondu un to izmanto lielie vārdi tīmeklī, piemēram, Bootstrap, Microsoft un Atlassian.
YY Tooltip - Atšķirībā no citām bibliotēkām, YY Tooltip neprasa pievienot HTML elementu vai atribūtus. Tas pilnībā darbojas ar JavaScript un saturs, pozīcija un krāsas ir definētas Objektā, nevis HTML elementā. Tas ir ideāli piemērots lietošanai kopā ar pilnu JavaScript tīmekļa lietojumprogrammu.
Position.js - Vēl viena lieliska vietējā JavaScript bibliotēka, lai izveidotu rīkus, Position.js nodrošina GUI, lai konfigurētu funkciju un vienkārši kopētu un ielīmētu tajā ģenerēto kodu. Position.js var izmantot kopā ar React.js vai Vue.js.
Bezet Tooltip - Šī bibliotēka nodrošina 14 opcijas, lai parādītu rīku padomu; piemēram, uz pa labi, pa kreisi, apakšā, kreisais centrs, labajā pusē, apakšējais centrs, utt. Turklāt tas ir pietiekami gudrs, ka tas varētu pielāgot rīku padeves pozīciju, pamatojoties uz pieejamo vietu apkārt rīku padevei. Pārbaudiet demonstrāciju.
MouseTip - Šī JavaScrtipt bibliotēka izveidos a rīku padoms, kas pārvietosies kursora pozīcijā. Rīku padoms ir konfigurēts ar nestandarta peles cepure- atribūtu, nevis HTML5 datus- atribūts. Mousetip ir pieejams kā NPM modulis.
Internets - Gluži tāpat kā MousetTip, šīs bibliotēkas radītais rīku padoms seko kursora pozīcijai. Viss ir konfigurēts, izmantojot JavaScript objektu, nevis HTML un atribūti tiek veidoti arī mūsdienu pārlūkiem. Tas ir viegls un ātrs.
MTip - JavaScript bibliotēka Tooltip ar lieliska pārlūka saderība. Tas ir saderīgs ar IE8, pilnībā pielāgojams, izmantojot opcijas, un jūs varat pievienot Tooltip jebkuram elementam pat uz img (attēla elements).
Burbuļi - viegla JavaScript bibliotēka, kas nodrošina vienkāršu funkcionalitāti a “rīku padoms”. JavaScript bibliotēku ir viegli izmantot bez sarežģītām iespējām, lai pielāgotu izeju. Sas fails tiek nodrošināts, ja vēlaties mainīt rīkjoslas izskatu. Pārbaudiet demonstrāciju.
Tipfy - Iebūvēts ar modernu JavaScript sintaksi, ES6, Tipfy ir tikai 2 KB lieluma. Bibliotēkā ir divas failu versijas: tipfy.min.js skripta nodrošināšana ar mūsdienu ES6 sintakse, un tipfy.es5.min.js ja jums ir nepieciešama saderība ar vecākām pārlūkprogrammām. Tā izmanto datus- atribūts, lai pielāgotu rīku padomu; the datu-tipfy-side, piemēram, izmanto, lai iestatītu rīku padoma virzienu un lietošanu datu-tipfy-text atribūts, lai pievienotu rīku padoma saturu.
jQuery
Tooltipster - Šī bibliotēka piedāvā plašas iespējas, lai pielāgotu gandrīz visu, piemēram, tēma, animācija, pieskāriena atbalsts, saturs, atvērts un ciešs sprūds, Tā arī nodrošina pielāgotu notikumu klausītāju un atzvanīšanu, kas ļauj izstrādātājiem paplašināt rīka padomu ar pielāgotām funkcijām. Arī tā ir jQuery spraudnis Tooltip darbosies vecākā pārlūkprogrammā, piemēram, IE6, atkarībā no jQuery versijas tiek izmantots.
Protip - Vēl viens plašs jQuery spraudnis, Protip atbalsta 49 pozīcijas, HTML rīkjoslas satura, ikonas atbalsta, pielāgotu atzvanīšanu, un daudz vairāk. Protip nodrošina GUI, kas ļauj jums viegli pielāgot rīkus.
PowerTip - Šis jQuery spraudnis nodrošina arī opcijas un API, kas sniedz izstrādātājiem vairākus dažādus veidus, kā īstenot rīku padomus. Tā atbalsta tastatūras navigācija; Uzsākot uznirstošo elementu navigāciju, logs tiek parādīts Tab tastatūra. PowereTip ir pieejams kā NPM modulis. To var izmantot kopā ar RequireJS un Browserify.
Pieejams Aria Tooltip - Iebūvēts jQuery spraudnis ar iebūvēto funkciju, rīku padoms paredzēts, lai parādītu dialoglodziņu ar virsrakstu, teksta rindu un aizvēršanas pogu. Tas ir viens no mūsu sarakstiem.
TipsJS - Vienkāršs jQuery spraudnis, tomēr tas rada diezgan atšķirīgas iezīmes. The Tooltip saturs ir iestatīts ar a datu rīks atribūts. Vēl vairāk ir tas, ka mēs varam arī iesaiņot saturu ar īpašām rakstzīmēm, lai formatētu saturu, kas līdzīgs Markdown formatējumam. Mēs varam izmantot * lai padarītu saturu drosmīgu, ~ par slīprakstu un ^ pozīcijai.
Dark Tooltip - Šī bibliotēka piedāvā dažas patiešām noderīgas funkcijas, lai aktivizētu rīku padomu. Piemēram, mēs varam pievienot apstiprināšanas poga - Jā un Nē, izgaismojiet fonu, kamēr tiek parādīts rīku padoms, un pievienojiet HTML elementus saturu. Es domāju, ka jums tiešām vajadzētu apskatīt demonstrācijas lapu.
Aria Tooltip - Vēl viens rīku padoms ar iebūvētu pieejamības funkciju, šis jQuery spraudnis ir saderīgs ar WAI-ARIA 1.1. Tas ir atsaucīgs tādā veidā, ka jūs varat nodrošina dažādus konfigurācijas dažādiem skatu logiem. Aria Tooltip ir pieejams kā NPM modulis t-aria-tooltip.
Toolbar.js - Kaut arī otrs jQuery spraudnis var parādīt tikai vienkāršu teksta vai HTML saturu rīku padevē, tas ir jQuery spraudnis izveido rīkjoslu. Rīkjoslā būtu divas vai vairākas saites ar ikonu, kas parasti veiks darbību klikšķis, tāpat kā jebkura rīkjosla. Apskatiet dokumentāciju un piemērus.
VueJS
V-Tooltip - V-Tooltip ir Vue.js komponents, ko darbina Popper.js zem pārsega. Tas nodrošina jaunā direktīva v-tooltip kuru var pievienot jebkuram elementam, lai izveidotu rīku padomu. The v-tooltip var saturēt rīku padeves saturu vai opcijas. Papildus ieradumam v-tooltip varat pievienot rīku padomu ar v-popover komponents. Ar šo komponentu varat pievienot sarežģītāku saturu rīkjoslā ar Vue.js komponentu vai HTML.
Vue-Bulma Tooltip - Vue.js komponents, lai izveidotu rīku padomu, pamatojoties uz Bulma UI Framework. Šī bibliotēka ir daļa no Vue Bulma. Bet Tooltip komponents ir pieejams kā NPM modulis vue-bulma-tooltip ka to var izmantot kā atsevišķus komponentus.
Vue-direktīvas-Tooltip - Kopumā tas ir līdzīgs V-Tooltip komponentam, kas balstīts uz Popper.js, un tā sauc par to pašu direktīvu v-tooltip. Tomēr šķiet, ka tas nenodrošina v-popover komponents.
Vue-Tippy - Šī bibliotēka aptver Tippy.js par Vue.js komponentu. Tā piedāvā pielāgotu Vue.js direktīvu v-tippy kas darbojas kā HTML atribūts; mēs varam pievienot saturu rīku padevei vai iespējām to pielāgot. Tas arī padara a pielāgotu Vue.js komponentu rīku padeves saturā, izmantojot html opcija.
VueJS-Popover - Pielāgots pielāgots Vue.js ar pielāgotu direktīvu v-popover un divi pielāgoti komponenti
Vue-Hint - Vue.js spraudnis, kas ietin Hint.css. Spraudņa funkcijas v-hint-css direktīvu, lai pievienotu rīku padomu. Tā piedāvā tādas pašas iespējas kā Hint.css, lai jūs varētu pievienot tos kā JavaScript objektu vai Vue.js modifikatoru.
ReactJS
Reaģējiet uz Joyride - React komponents, lai parādītu rīku padomu kopumu palīdzēs jaunajiem lietotājiem iepazīties ar jauno pieteikumu.
Reaģēt uz peldētāju - Šī bibliotēka aptver Popper.js par React komponentu Floater, tāpēc tai ir tādas pašas lieliskas iespējas kā Floater. Jūs varat pievienot rīkjoslu un uznirstošo logu, un jūs varat arī spēlēt ar šo komponentu caur šo smilšu kasti.
React Autotip - Vienkāršs React komponents ar automātiskās pozicionēšanas funkciju, autotipu automātiski noregulē rīka padeves pozīciju kad mainās pieejamā telpa.
Reaģējiet Tippy - Uzbūvēta virs Tippy.js un Popover.js. Šī bibliotēka ievieš a Tooltip komponentu jūs varat iekļaut savā React lietojumprogrammā.
Reaģējiet uz padomu - Reaģēšanas komponents, kas paplašina Hint.css. Komponenti pievieno dažas funkcijas, kas nav pieejamas Hint.css, piemēram, automātiskās pozīcijas, aizkaves un atzvanīšanas funkcija.
Vairāk
Cilvēku rīku padomi - Cilvē.js komponents, lai izveidotu rīkus, tas ir veidots uz Popper.js. Komponents ir izstrādāts arī ar Pieejamība prātā un uzlabojas, lai izpildītu aptuveni 508 prasības šajā jautājumā.
D3 Padoms - D3.js spraudnis. D3.js ir JavaScript bibliotēka datu vizualizācijai, piemēram, diagrammas, kartes, diagrammas utt. Šis spraudnis ļauj jums parādīt rīku padomu uz šiem datiem.
