40 + Nyttige verktøytips Skript med CSS, JavaScript og jQuery

Et interessant brukergrensesnitt, verktøytips (også kalt infotips) gjør at en liten boks vises når musemarkøren er svevet over en bestemt tekst eller et bilde med informasjon om elementet som svinger over. Når det gjelder brukeropplevelse, gir verktøytips brukerne den raskeste og enkleste informasjonskilden uten å måtte klikke noe.

Selv om den enkleste måten å legge til verktøytips i teksten er å bruke HTML-tagg eller TITLE =””, ALT =””. Men det er noen veldig kule tooltips design og stiler du kan lage med JavaScript og CSS bruker verktøytips skript. La oss ta en titt.

CSS

Balloon.css - Ballong er CSS bibliotek komponert med SasS og LESS å vise et interaktivt verktøytips. Innholdet og posisjonen til verktøytipset kan konfigureres gjennom data- Egenskap. Du kan vise verktøytipset til venstre, høyre eller venstre til høyre. Du kan til og med legg Emojis til innholdet. Balloon.css kan installeres via NPM og eller laste den fra CDNJS.

Simptip - Laget med SasS gjør det mulig å omkonfigurere og kompilere koden for å passe dine krav. Verktøytipsposisjonen og innholdet kan konfigureres gjennom klassenavnet og data-tooltip Egenskap. Simptip er tilgjengelig som en NPM, Garn og Bower-pakken.

Hint.css - En av de populære CSS-bibliotekene for å vise verktøytips, Hint.css, brukes av mange populære nettsteder som Fiverr, Webflow og Tridiv. I motsetning til de andre to CSS-bibliotekene, Hint.css bruker aria-etikett Du kan konfigurere størrelsen og fargen gjennom klassenavnene bruker BEM metodikk. Hint.css er tilgjengelig på NPM, Bower og CDNJS.

microtip - Et annet fantastisk CSS-bibliotek for å lage verktøytips bygget med “tilgjengelighet” i tankene, Microtip bruker aria-etikett for å holde verktøytipsinnholdet og data- Tilordne å konfigurere verktøytipens størrelse og posisjon.

Den bruker CSS-variabel som lar deg tilpasse verktøytipset med bare vanlig ol 'CSS-fil. CSS-variabler støttes allerede i mange web- og mobilnettlesere. Microtip er tilgjengelig som en NPM, Garn pakke, og UNPkg CDN.

Wenk - Det er bare 733 byte. Et super lett bibliotek skrevet i et super moderne CSS ved hjelp av CSSNext, LESS og SCSS så kan du tilpasse og kompilere stilene slik du vil. Wenk kan lastes ned fra NPM, Garn, og følgende gratis CDN-tjenester: rawgit.com og unpkg.com.

Tooltippy - En annen lett CSS-bibliotek å være omtrent 1 KB i størrelse. Tooltippy inneholder flere forhåndsdefinerte temaer for styling av verktøytipset. Den er skrevet med en CSS-forprosessor, kalt Stylus. Se instruksjonene om hvordan du kan utvide eller tilpasse disse temaene.

ElegantTips - Dette biblioteket kommer med noen få pre-built temaer som kan endres med de oppgitte klassenavnene. I motsetning til de andre bibliotekene som er avhengige av HTML5 data- eller aria-etikett Attributt, ElegantTips krever et ekstra element lagt til for å danne verktøytipset. Dette tillater deg å Legg til bokstavelig talt alt innhold til verktøyklippet utover enkel tekst.

Tootik - Ikke bare at dette CSS-biblioteket gir stilarket i CSS, LESS og SasS-format, det gir også en brukervennlig GUI for å tilpasse verktøytipset. Du kan bare kopiere og lime inn HTML-koden som genereres av dette verktøyet. Det er så enkelt.

VanillaJS

TippyJS - Drevet av Popper.js, TippyJS kommer med en overflod av alternativer for å konfigurere verktøytipset. Vi kan tilpasse animasjonene, verktøytip-pilen, bredden, størrelsen, temaet og mye mer. Det gir også tilbakeringingsfunksjoner som du kan Utfør en funksjon når verktøytipset er vist og skjult. Disse funksjonene gjør TippyJS til et av våre kraftige JavaScript-biblioteker på vår liste for å lage verktøytips.

Darsain Tooltip - Dette biblioteket gir grunnleggende implementering av et verktøytips. Likevel gir det omfattende muligheter til å konfigurere tootipatferd, og a sett med klassenavn for å endre utseende på verktøytipset. Verktøytipset fungerer bra i eldre nettleser som IE9 og, om nødvendig, IE8 med noen justeringer.

Bubb - Bubb kan være godt egnet for avanserte JavaScript-brukere. Bruker sin omfattende APIer, bortsett fra å vise enkel tekst, Du kan programmatisk legge til et mer komplisert HTML-innhold i verktøylippen. Det er ganske kult; Du kan referere til dokumentene eksemplene.

Popper - Inneholder en teknisk abstraksjon for å skape noe som “pops”, som et verktøytips, en popover og drop-downs. TippyJS bruker det som bibliotekets fundament og brukes av store navn på nettet, for eksempel Bootstrap, Microsoft og Atlassian.

YY Tooltip - I motsetning til de andre bibliotekene, YY Tooltip krever ikke at du legger til et HTML-element eller attributter. Det fungerer fullt ut med JavaScript, og innholdet, posisjonen og fargerne er definert i et objekt i stedet for i et HTML-element. Det er perfekt å bli brukt sammen med en fullstendig JavaScript-applikasjon.

Position.js - Et annet ypperlig innfødt JavaScript-bibliotek for å lage verktøytips, Position.js gir en GUI for å konfigurere funksjonen og bare kopiere og lime inn koden generert der. Position.js kan brukes sammen med React.js eller Vue.js.

Bezet Tooltip - Dette biblioteket gir 14 valg for å vise verktøytipset; som på Ikke sant, venstre, bunn, venstre-sentrum, høyre-end, bunn-midt, etc. På toppen av det, det også smart nok at det kunne juster verktøytipsposisjonen basert på ledig plass rundt verktøytipset. Sjekk ut demoen.

MouseTip - Dette JavaScrtipt-biblioteket vil opprette en verktøylipp som vil bevege seg langs markørposisjonen. Verktøytipset er konfigurert med en ikke-standard mousetip- attributt i stedet for å bruke HTML5 data- Egenskap. Mousetip er tilgjengelig som en NPM-modul.

Internetips - Ganske likt MousetTip, verktøytipset generert av dette biblioteket følger markørposisjonen. Alt er konfigurert gjennom JavaScript-objektet i stedet for HTML og Attributter er også bygget for moderne nettlesere. Det er lett og raskt.

MTip - Et JavaScript-bibliotek for Tooltip med flott nettleserkompatibilitet. Den er kompatibel med IE8, fullt tilpassbar gjennom alternativene, og du kan legge til Tooltip til et hvilket som helst element selv på en img (et bildeelement).

Bubblesee - et lett JavaScript-bibliotek som gir en grei funksjonalitet av a “verktøytips”. Det er lett å bruke JavaScript-biblioteket uten kompliserte alternativer for å tilpasse utdataene. En Sass-fil er gitt hvis du vil endre utseende på verktøyklippet. Sjekk ut demoen.

Tipfy - Bygget med den moderne JavaScript-syntaksen, ES6, Tipfy er bare 2 KB i størrelse. Biblioteket inneholder to versjoner av filer: tipfy.min.js gi skriptet med moderne ES6 syntaks, og tipfy.es5.min.js hvis du trenger kompatibilitet med eldre nettlesere. Det bruker data- Tilordne til å tilpasse verktøytipset; de data-tipfy-side, for eksempel, brukes til å sette verktøytipsretningen og bruke data-tipfy-tekst attributt til å legge til verktøylinjeinnholdet.

jQuery

Tooltipster - Dette biblioteket gir omfattende muligheter til å tilpasse nesten alt som tema, animasjon, touch-support, innhold, åpne og lukke utløseren, etc. Det gir også tilpasset hendelse lytter og tilbakeringinger slik at utviklere kan utvide verktøytipset med tilpassede funksjoner. Også, å være en jQuery-plugin, den verktøytips ville fungere i eldre nettlesere som IE6, avhengig av jQuery-versjonen blir brukt.

Protip - En annen omfattende jQuery-plugin, Protip støtter 49 stillinger, HTML for verktøytipsinnholdet, ikonstøtte, tilpassede tilbakeringinger, og mye mer. Protip gir en GUI slik at du kan tilpasse verktøytipset med letthet.

POWERTIP - Denne jQuery-plugin bringer også alternativer og APIer som gir utviklere en rekke forskjellige måter å implementere verktøytipsene på. Den støtter tastaturnavigasjon; slik at popupen vises når du navigerer elementer med Tab tastatur. PowereTip er tilgjengelig som en NPM-modul. Den kan brukes med RequireJS og Browserify.

Tilgjengelig Aria Tooltip - En jQuery-plugin med tilgjengelighetsfunksjon innebygd, verktøytipset er utformet for å vise en dialogboks med tittel, multilinje med tekst og en tett knapp. Det er en av sine egne på vår liste.

TipsJS - En enkel jQuery-plugin, men det bringer ganske særegne funksjoner. De verktøytipsinnhold er satt med a data-tooltip Egenskap. Dessuten kan vi også pakke inn innholdet med spesialtegn for å formatere innholdet som ligner Markdown-formatering. Vi kan bruke * for å gjøre innholdet fet, ~ for kursiv, og ^ for overskrift.

Dark Tooltip - Dette biblioteket gir noen virkelig nyttige funksjoner for å slå opp verktøytipset. For eksempel kan vi legge til en Bekreft-knapp - Ja og Nei, dimer bakgrunnen mens verktøytipset vises, og legg til HTML-elementer til innholdet. Jeg tror du burde sjekke ut demoversiden.

Aria Tooltip - Et annet verktøytips med innebygd tilgjengelighetsfunksjon, dette jQuery-pluginet er WAI-ARIA 1.1-kompatibelt. Det er responsivt på en måte som du kan gi forskjellige konfigurasjoner for forskjellige visningsstørrelser. Aria Tooltip er tilgjengelig som en NPM-modul som heter t-aria-tooltip.

Toolbar.js - Mens det andre jQuery-pluginet bare kan vise enkel tekst eller HTML-innhold i et verktøytips, dette jQuery-plugin lager en verktøylinje. Verktøytipset vil inneholde to eller flere koblinger med et ikon som vanligvis utfører en handling klikk, som alle verktøylinjer. Sjekk ut dokumentasjonen og eksemplene.

VueJS

V-Tooltip - V-Tooltip er en Vue.js komponent drevet av Popper.js under hetten. Det gir en nytt direktiv heter v-tooltip som kan legges til ethvert element for å lage et verktøytips. De v-tooltip kan inneholde verktøytipsinnholdet eller alternativene. Bortsett fra skikken v-tooltip direktiv, kan du også legge til verktøytipset med v-popover komponent. Med denne komponenten kan du legg til mer komplekst innhold i verktøytipset med Vue.js-komponent eller HTML.

Vue-Bulma Tooltip - En Vue.js-komponent for å lage verktøytips basert på Bulma UI Framework. Dette biblioteket er en del av Vue Bulma. Men Tooltip-komponent er tilgjengelig som en NPM-modul som heter vue-Bulma-verktøytips at du kan bruke dette som frittstående komponenter.

Vue-direktiv-Tooltip - Samlet sett ligner det på V-Tooltip-komponent basert på Popper.js og gir samme direktiv kalt v-tooltip. Det ser imidlertid ikke ut til å gi v-popover komponent.

Vue-Tippy - Dette biblioteket pakker Tippy.js inn i en Vue.js-komponent. Den har et tilpasset Vue.js-direktiv som heter v-tippy som fungerer som et HTML-attributt; Vi kan legge til innhold for verktøytips eller alternativene for å tilpasse det. Det gjør også en tilpasset Vue.js-komponent på verktøytipsinnholdet ved hjelp av html alternativ.

VueJS-Popover - En tilpasset Vue.js med et tilpasset direktiv som heter v-popover og to tilpassede komponenter nemlig og gir fleksibilitet for utviklere å legge til verktøytips i Vue.js-applikasjonen.

Vue-Hint - En Vue.js plugin som bryter Hint.css. Pluggen har funksjoner v-hint-css direktiv for å legge til verktøytipset. Den bringer samme sett med alternativer som Hint.css, slik at du kan legge dem til som JavaScript-objekt eller Vue.js-modifikator.

ReactJS

Reag Joyride - En React-komponent for å vise et sett med verktøytips som vil veilede nye brukere for å bli kjent med det nye programmet.

React Floater - Dette biblioteket bryter Popper.js inn i en React-komponent med navnet Floater, så det har de samme flotte funksjonene som Floater. Du kan legge til verktøytip og popup, og du kan også lek med denne komponenten gjennom denne sandkassen.

Reag Autotip - En enkel React-komponent med auto-posisjoneringsfunksjonen, eact Autotip vil Juster automatisk verktøytipsets posisjon når ledig plass rundt den endres.

Reag Tippy - Bygget på toppen av Tippy.js og Popover.js. Dette biblioteket introduserer en tooltip komponent som Du kan inkludere i React-programmet.

Reaktips - En React-komponent som utvider Hint.css. Komponentene legger til noen få funksjoner som ikke er tilgjengelige i Hint.css, for eksempel automatisk posisjon, forsinkelse og tilbakeringingsfunksjon.

Mer

Ember Tooltips - En Ember.js-komponent for å lage verktøytips, den er bygget på toppen av Popper.js. Komponenten er også designet med tilgjengelighet for øye og holder forbedring for å overholde ca. 508 komplience i denne saken.

D3 Tips - en D3.js plugin. D3.js er et JavaScript-bibliotek for datavisualisering som diagrammer, kart, diagrammer etc. Dette plugin lar deg vise verktøytips på toppen av disse dataene.