40 + Nyttige Tooltips Scripts med CSS, JavaScript og jQuery
Et interessant UI-element, værktøjstip (også kaldet infotips), gør en lille boks til at vises, når musemarkøren er svævet over en bestemt tekst eller et billede med information hvad angår elementet, der svæves over. Med hensyn til brugeroplevelse giver værktøjstips brugerne den hurtigste og nemmeste kilde til information uden at skulle klikke på noget.
Selvom den enkleste måde at tilføje værktøjstip til din tekst er at bruge HTML-tag eller TITLE =””, ALT =””. Men der er nogle virkelig cool værktøjstip designs og stilarter, du kan oprette med JavaScript og CSS ved hjælp af værktøjstipsskripter. Lad os se.
CSS
Balloon.css - Ballon er CSS bibliotek sammensat med SasS og LESS at vise et interaktivt værktøjstip. Indholdet og placeringen af værktøjstipen kan konfigureres gennem data- attribut. Du kan vise værktøjstipen til venstre, højre eller venstre til højre. Du kan endda Tilføj Emojis til indholdet. Balloon.css kan installeres via NPM og eller indlæse den fra CDNJS.
Simptip - Lavet med SasS gør det muligt at Omkonfigurer og genkompil koden for at passe til dit krav. Værktøjstipens placering og indhold kan konfigureres gennem klassenavnet og data-tooltip attribut. Simptip er tilgængelig som en NPM, Garn og Bower pakke.
Hint.css - En af de populære CSS biblioteker til visning af værktøjstip, Hint.css bruges af mange populære hjemmesider som Fiverr, Webflow og Tridiv. I modsætning til de to andre CSS biblioteker, Hint.css bruger aria-label Du kan konfigurere størrelse og farve gennem klassenavne ved hjælp af BEM-metodologi. Hint.css er tilgængelig på NPM, Bower og CDNJS.
mikrospids - Et andet fantastisk CSS bibliotek til oprettelse af værktøjstip bygget med “Tilgængelighed” i tankerne, Microtip anvendelser aria-label at holde værktøjstipindholdet og data- attribut til at konfigurere værktøjstipens størrelse og position.
Den bruger CSS-variabel, som giver dig mulighed for at tilpasse værktøjstipen med bare almindelig OL 'CSS-fil. CSS-variabler understøttes allerede i mange web- og mobilbrowsere. Microtip er tilgængelig som en NPM, Garn pakke og UNPkg CDN.
Wenk - Det er kun 733 byte. Et super letvægtsbibliotek skrevet i et supermoderne CSS ved hjælp af CSSNext, LESS og SCSS så kan du tilpasse og genkompilere stilarterne som du vil. Wenk kan downloades fra NPM, Garn og følgende gratis CDN-tjenester: rawgit.com og unpkg.com.
Tooltippy - En anden letvægts CSS bibliotek er lige omkring 1 KB i størrelse. Tooltippy indeholder flere præfabrikerede temaer til styling af værktøjstip. Det er skrevet med en CSS-forprocessor, der hedder Stylus. Se vejledningen om, hvordan du kan udvide eller tilpasse disse temaer.
ElegantTips - Dette bibliotek kommer med et par stykker præ-bygget temaer der kan ændres med de angivne klassenavne. I modsætning til de andre biblioteker, der er afhængige af HTML5 data- eller den aria-label attribut, ElegantTips kræver et ekstra element tilføjet for at danne værktøjstip. Dette giver dig mulighed for Tilføj bogstaveligt talt ethvert indhold til værktøjstip ud over simpel tekst.
Tootik - Ikke kun at dette CSS-bibliotek giver stilarket i CSS, LESS og SasS-format, det giver også en brugervenlig GUI til at tilpasse værktøjstipen. Du kan simpelthen kopiere og indsætte HTML genereret af dette værktøj. Det er så simpelt.
VanillaJS
TippyJS - Drevet af Popper.js, TippyJS leveres med en overflod af muligheder for at konfigurere værktøjstip. Vi kan tilpasse animationerne, værktøjstip-pilen, bredden, størrelsen, temaet og meget mere. Det giver også Callback funktioner, som du kan udfør en funktion, når værktøjstip vises og gemmes. Disse funktioner gør TippyJS til et af vores kraftfulde JavaScript-biblioteker på vores liste for at oprette værktøjstip.
Darsain Tooltip - Dette bibliotek giver den grundlæggende implementering af et værktøjstip. Alligevel giver den omfattende muligheder for at konfigurere tootipfærden, og a sæt af klassenavne for at ændre værktøjstip udseende. Værktøjstip fungerer godt i ældre browser som IE9 og, hvis det er nødvendigt, IE8 med nogle få tilpasninger.
Bubb - Bubb kan være velegnet til avancerede JavaScript-brugere. Brug af dens omfattende API'er, bortset fra at vise simpel tekst, Du kan programmelt tilføje et mere komplekst HTML-indhold til værktøjstipen. Det er ret koldt; Du kan henvise til Dokumenterne, eksemplerne.
Popper - Indeholder en teknisk abstraktion for at skabe noget der “pops”, som et værktøjstip, en popover og drop-downs. TippyJS bruger det som bibliotekets fundament og bruges af store navne på internettet som Bootstrap, Microsoft og Atlassian.
YY Værktøjstip - I modsætning til de andre biblioteker, YY Tooltip kræver ikke, at du tilføjer et HTML-element eller attributter. Det fungerer fuldt ud med JavaScript, og indholdet, positionen og farverne er defineret i et objekt i stedet for i et HTML-element. Det er perfekt til at blive brugt sammen med en komplet JavaScript webapplikation.
Position.js - Et andet fremragende indfødt JavaScript-bibliotek til at oprette værktøjstips, Position.js giver en GUI til at konfigurere funktionen og simpelthen kopiere og indsætte koden der genereres der. Position.js kan bruges sammen med React.js eller Vue.js.
Bezet Tooltip - Dette bibliotek giver 14 muligheder for at vise værktøjstip; som på ret, venstre, bund, venstre-center, højre-ende, bottom-center, mv. På toppen af det var det også smart nok, at det kunne juster værktøjstip-positionen baseret på det ledige rum omkring værktøjstipen. Tjek demoen.
MouseTip - Dette JavaScrtipt bibliotek vil oprette en værktøjstip, der bevæger sig langs markørpositionen. Værktøjetipet er konfigureret med en ikke-standard mousetip- attribut i stedet for at bruge HTML5 data- attribut. Mousetip er tilgængelig som et NPM modul.
Internetips - Helt ligner MousetTip, værktøjstipset genereret af dette bibliotek følger markørpositionen. Alt er konfigureret via JavaScript-objektet i stedet for HTML og Attributter er også bygget til moderne browsere. Det er let og hurtigt.
MTip - Et JavaScript-bibliotek til Tooltip med stor browser kompatibilitet. Det er kompatibelt med IE8, fuldt tilpasses via indstillingerne, og du kan tilføje Tooltip til et hvilket som helst element selv på en img (et billedelement).
Bubblesee - et letvægts JavaScript-bibliotek, der giver en retfærdig funktionalitet af a “værktøjstip”. Det er nemt at bruge JavaScript-biblioteket uden komplicerede muligheder for at tilpasse output. En Sass-fil leveres, hvis du vil ændre værktøjstipudseendet. Tjek demoen.
Tipfy - Bygget med den moderne JavaScript-syntaks, ES6, Tipfy er kun 2 KB i størrelse. Biblioteket indeholder to versioner af filer: tipfy.min.js giver scriptet med moderne ES6 syntaks, og tipfy.es5.min.js hvis du har brug for kompatibilitet med ældre browsere. Det bruger data- attribut til at tilpasse værktøjstipen; det data-tipfy-side, for eksempel er brugt til at indstille værktøjstip retning og bruge data-tipfy-tekst attribut til at tilføje indholdet af værktøjstip.
jQuery
Tooltipster - Dette bibliotek giver omfattende muligheder for at tilpasse næsten alt som f.eks tema, animation, touch-support, indhold, open-and-close trigger, osv. Det giver også brugerdefineret hændelseslytter og tilbagekald, så udviklere kan udvide værktøjstip med brugerdefinerede funktioner. Også, at være en jQuery-plugin, den værktøjstip ville arbejde i ældre browser som IE6 afhængigt af jQuery-versionen bliver brugt.
protip - En anden omfattende jQuery-plugin, Protip understøtter 49 stillinger, HTML for indholdet af værktøjstip, ikonstøtte, brugerdefinerede tilbagekaldelser, og meget mere. Protip giver en GUI, så du nemt kan tilpasse værktøjstipen.
Powertip - Denne jQuery-plugin bringer også muligheder og API'er, der giver udviklere en række forskellige måder at implementere værktøjstips på. Det understøtter tastaturnavigation; at popupen vises, når du navigerer elementer med Tab tastatur. PowereTip er tilgængelig som et NPM-modul. Det kan bruges med RequireJS og Browserify.
Tilgængelig Aria Tooltip - Et jQuery-plugin med tilgængelighed er indbygget, værktøjstipet er designet til at vise en dialogboks med en titel, multiline af tekst og en tæt knap. Det er en af sine egne på vores liste.
TipsJS - En simpel jQuery-plugin, men det bringer ganske særprægede funktioner. Det Tooltip indhold er indstillet med a data-tooltip attribut. Hvad mere er, at vi også kan pakke indholdet med specialtegn til at formatere indholdet, der ligner Markdown-formatering. Vi kan bruge * for at gøre indholdet fed, ~ for kursiv og ^ til overskrift.
Dark Tooltip - Dette bibliotek giver nogle virkelig nyttige funktioner til at aktivere værktøjstipen. For eksempel kan vi tilføje en Bekræft-knappen - Ja og Nej, dæmp baggrunden, mens værktøjstip vises, og tilføj HTML-elementer til indholdet. Jeg tror, at du virkelig bør tjekke demo siden.
Aria Tooltip - Et andet værktøjstip med indbygget tilgængelighed-funktion er dette jQuery-plugin, der er kompatibelt med WAI-ARIA 1.1. Det er lydhør på en måde, du kan give forskellige konfigurationer til forskellige visningsstørrelser. Aria Tooltip er tilgængeligt som et NPM-modul, der hedder t-aria-tooltip.
Toolbar.js - Mens det andet jQuery-plugin kun viser simpel tekst eller HTML-indhold inden for et værktøjstip, dette jQuery-plugin opretter en værktøjslinje. Værktøjetipet vil indeholde to eller flere links med et ikon, der typisk udfører en handling klik, som enhver værktøjslinje. Tjek dokumentationen og eksemplerne.
VueJS
V-Tooltip - V-Tooltip er en Vue.js komponent drevet af Popper.js under hætten. Det giver en nyt direktiv nævnt v-tooltip som kan tilføjes til ethvert element for at oprette et værktøjstip. Det v-tooltip kan indeholde værktøjstipindholdet eller indstillingerne. Bortset fra den brugerdefinerede v-tooltip direktiv, kan du også tilføje værktøjstip med v-popover komponent. Med denne komponent kan du Tilføj mere komplekst indhold i værktøjstipen med Vue.js-komponent eller HTML.
Vue-Bulma Tooltip - En Vue.js komponent til at oprette værktøjstip baseret på Bulma UI Framework. Dette bibliotek er en del af Vue Bulma. Men værktøjstip komponent er tilgængelig som et NPM modul navngivet vue-Bulma-tooltip at du kan bruge dette som selvstændige komponenter.
Vue-direktiv-Tooltip - Samlet set ligner den V-Tooltip komponent baseret på Popper.js og giver samme direktiv kaldet v-tooltip. Det ser imidlertid ikke ud til at give v-popover komponent.
Vue-Tippy - Dette bibliotek indpakker Tippy.js til en Vue.js-komponent. Den har et brugerdefineret Vue.js-direktiv, der hedder v-tippy det fungerer som en HTML-attribut; vi kan tilføje indhold til værktøjstip eller mulighederne for at tilpasse det. Det gør også en brugerdefineret Vue.js-komponent på værktøjstipindholdet ved hjælp af html mulighed.
VueJS-Popover - En brugerdefineret Vue.js med et brugerdefineret direktiv kaldet v-popover og to brugerdefinerede komponenter nemlig
Vue-Tip - Et Vue.js-plugin, der ombryder Hint.css. Plugin funktioner v-tip-css direktiv for at tilføje værktøjstip. Det bringer det samme sæt indstillinger som Hint.css, så du kan tilføje dem som et JavaScript-objekt eller Vue.js-modifikator.
ReactJS
Reag Joyride - En React-komponent til at vise et sæt værktøjstips, der vil guide nye brugere for at blive fortrolig med din nye applikation.
React Floater - Dette bibliotek ombryder Popper.js til en React-komponent med navnet Floater, så det har de samme fantastiske funktioner som Floater's. Du kan tilføje værktøjstip og popup, og du kan også lege med denne komponent gennem denne sandkasse.
Reag Autotip - En simpel React-komponent med auto-positioneringsfunktionen, eact Autotip vil Juster automatisk værktøjstipens position når den ledige plads omkring den ændres.
React Tippy - Bygget oven på Tippy.js og Popover.js. Dette bibliotek introducerer en tooltip komponent det Du kan medtage i din React ansøgning.
React Hint - En React-komponent, der udvider Hint.css. Komponenterne tilføjer et par funktioner, der ikke er tilgængelige i Hint.css som f.eks automatisk position, forsinkelse og en tilbagekaldsfunktion.
Mere
Ember Tooltips - En Ember.js-komponent til oprettelse af værktøjstip, den er bygget oven på Popper.js. Komponenten er også designet med tilgængelighed i tankerne og holder forbedring for at overholde omkring 508 overbevisning om denne sag.
D3 Tip - en D3.js plugin. D3.js er et JavaScript-bibliotek til datavisualisering som diagrammer, kort, diagrammer osv. Dette plugin giver dig mulighed for at vise værktøjstip oven på disse data.
