40 + Användbara verktygstips Skript med CSS, JavaScript och jQuery

Ett intressant användargränssnitt, verktygstips (även kallade infotips) gör att en liten låda visas när muspekaren är svävad över en viss text eller bild med information beträffande elementet som svävar över. När det gäller användarupplevelse ger verktygetips användarna den snabbaste och enklaste informationskällan utan att behöva klicka på något.

Även om det enklaste sättet att lägga till verktygstips i din text är att använda HTML-tagg eller TITLE =””, ALT =””. Det finns dock några riktigt coola verktygstips design och stilar du kan skapa med JavaScript och CSS med hjälp av verktygstipsskript. Låt oss ta en titt.

CSS

Balloon.css - Ballong är CSS-bibliotek sammansatt med SasS och LESS för att visa ett interaktivt verktygstips. Innehållet och positionen för verktygstipset kan konfigureras via data- attribut. Du kan visa verktygstipsen åt vänster, höger eller vänster-höger. Du kan till och med lägg till Emojis till innehållet. Balloon.css kan installeras via NPM och eller ladda den från CDNJS.

Simptip - Gjord med SasS som möjliggör att omkonfigurera och kompilera koden för att passa ditt krav. Verktygstipspositionen och innehållet kan konfigureras genom klassnamnet och data tooltip attribut. Simptip finns som en NPM, Garn och Bower-paket.

Hint.css - En av de populära CSS-biblioteken för att visa verktygstips, Hint.css används av många populära webbplatser som Fiverr, Webflow och Tridiv. Till skillnad från de andra två CSS-biblioteken, Hint.css använder aria-etikett Du kan konfigurera storlek och färg genom klassnamnen med hjälp av BEM-metodiken. Hint.css finns på NPM, Bower och CDNJS.

mikro - Ett annat bra CSS-bibliotek för att skapa verktygstips byggt med “Tillgänglighet” i åtanke, Microtip användningar aria-etikett för att hålla verktygstipsinnehållet och data- Attribut för att konfigurera verktygstipsstorleken och positionen.

Den använder CSS-variabel som gör att du kan anpassa verktygstipset med en vanlig CSS-fil. CSS-variabler stöds redan i många web- och mobila webbläsare. Microtip finns som NPM, Garnpaket och UNPkg CDN.

Wenk - Det är bara 733 byte. Ett super lätt bibliotek skrivet i en supermodern CSS med CSSNext, LESS och SCSS så kan du anpassa och kompilera stilar så som du vill. Wenk kan laddas ner från NPM, Garn och följande gratis CDN-tjänster: rawgit.com och unpkg.com.

Tooltippy - Annan lättvikts CSS-bibliotek är ungefär 1 KB i storlek. Tooltippy innehåller flera färdiga teman för styling av verktygstips. Det är skrivet med en CSS-förprocessorer med namnet Stylus. Se anvisningarna om hur du kan utvidga eller anpassa dessa teman.

ElegantTips - Detta bibliotek kommer med några förbyggda teman som kan ändras med de angivna klassnamnen. Till skillnad från de andra biblioteken som är beroende av HTML5 data- eller den aria-etikett attribut, kräver ElegantTips ett extra element som läggs till för att skapa verktygstipset. Detta gör att du kan lägg till bokstavligen något innehåll i verktygstipset utöver enkel text.

Tootik - Inte bara att detta CSS-bibliotek ger stilarket i CSS, LESS och SasS-format, det ger också en lättanvänd GUI för att anpassa verktygstipset. Du kan enkelt kopiera och klistra in HTML som genereras av det här verktyget. Det är så enkelt.

VanillaJS

TippyJS - Drivs av Popper.js, TippyJS levereras med en överflöd av alternativ för att konfigurera verktygstipset. Vi kan anpassa animeringarna, verktygstipspilen, bredden, storleken, temat och mycket mer. Det ger också återuppringningsfunktioner som du kan exekvera en funktion när verktygstips visas och döljes. Dessa funktioner gör TippyJS till ett av våra kraftfulla JavaScript-bibliotek på vår lista för att skapa verktygstips.

Darsain Tooltip - Detta bibliotek ger grundläggande implementering av ett verktygstips. Ändå erbjuder det omfattande alternativ för att konfigurera tootipbeteendet, och a uppsättning klassnamn för att ändra verktygetipsutseende. Verktygstips fungerar bra i äldre webbläsare som IE9 och, om det behövs, IE8 med några justeringar.

Bubb - Bubb kan vara väl lämpad för avancerade JavaScript-användare. Använda dess omfattande API, förutom att visa enkel text, du kan programmässigt lägga till ett mer komplext HTML-innehåll till verktygstipset. Det är ganska coolt; du kan referera till dokumenten exemplen.

Popper - Innehåller en teknisk abstraktion för att skapa något som “pop”, som ett verktygstips, en popover och drop-downs. TippyJS använder den som bibliotekets grund och används av stora namn på webben som Bootstrap, Microsoft och Atlassian.

YY Tooltip - Till skillnad från de andra biblioteken, YY Tooltip kräver inte att du lägger till ett HTML-element eller attribut. Det fungerar fullt ut med JavaScript och innehållet, positionen och färgerna definieras i ett objekt istället för i ett HTML-element. Det är perfekt att användas tillsammans med en hel JavaScript webbapplikation.

Position.js - Ett annat utmärkt inbyggt JavaScript-bibliotek för att skapa verktygstips, Position.js tillhandahåller en GUI för att konfigurera funktionen och helt enkelt kopiera och klistra in den genererade koden där. Position.js kan användas i kombination med React.js eller Vue.js.

Bezet Tooltip - Detta bibliotek ger 14 alternativ för att visa verktygstipset; som på höger, vänster, botten, vänster-centrum, right-end, bottom-centrum, etc. På toppen av det, det också smart nog att det kunde justera verktygstipspositionen baserat på ledigt utrymme omgivande verktygstipset. Kolla in demoen.

MouseTip - Detta JavaScrtipt-bibliotek skapar en verktygstips som flyttar längs markörpositionen. Verktygstipset är konfigurerat med en icke-standard mousetip- attribut istället för att använda HTML5 data- attribut. Mousetip finns som en NPM-modul.

Internetips - Liknar MousetTip, verktygetipset som genereras av det här biblioteket följer markörpositionen. Allt är konfigurerat via JavaScript-objektet istället för HTML och attribut är också byggda för moderna webbläsare. Det är lätt och snabbt.

MTip - Ett JavaScript-bibliotek för Tooltip med bra webbläsarkompatibilitet. Den är kompatibel med IE8, fullt anpassningsbar via alternativen, och du kan lägga till Tooltip till något element även på en img (ett bildelement).

Bubblesee - ett lättviktigt JavaScript-bibliotek som ger en rak funktionalitet av a “verktygstips”. Det är lätt att använda JavaScript-biblioteket utan komplicerade alternativ för att anpassa utmatningen. En Sass-fil tillhandahålls om du vill ändra verktygetipsutseendet. Kolla in demoen.

Tipfy - Byggd med den moderna JavaScript-syntaxen, ES6, Tipfy är bara 2 KB i storlek. Biblioteket innehåller två versioner av filer: tipfy.min.js tillhandahålla manuset med modern ES6 syntax, och tipfy.es5.min.js om du behöver kompatibilitet med äldre webbläsare. Det använder data- attribut att anpassa verktygstipset; de data tipfy-sida, till exempel används för att ställa in verktygsriktningsriktningen och använda data tipfy-text ange att lägga till verktygstipsinnehållet.

jQuery

Tooltipster - Detta bibliotek erbjuder omfattande alternativ för att anpassa nästan allt som tema, animering, touch-support, innehåll, öppna och stänga trigger, etc. Det ger också anpassad händelse lyssnare och callbacks tillåter utvecklare att förlänga verktygstips med anpassade funktioner. Dessutom är det ett jQuery-plugin, den verktygstips skulle fungera i äldre webbläsare som IE6 beroende på jQuery-versionen används.

Proffstips - Ett annat omfattande jQuery-plugin, Protip stöder 49 positioner, HTML för verktygstipsinnehållet, ikonstöd, anpassade återuppringningar, och mycket mer. Protip ger en GUI så att du enkelt kan anpassa verktygstipsen.

POWERTIP - Detta jQuery-plugin ger också alternativ och API-skivor som ger utvecklare ett antal olika sätt att implementera verktygstipsen. Den stöder tangentbordsnavigering; popupen visas när du navigerar med elementet med Flik tangentbord. PowereTip är tillgänglig som en NPM-modul. Den kan användas med RequireJS och Browserify.

Tillgänglig Aria Tooltip - Ett jQuery-plugin med tillgänglighetsfunktionen inbyggd är verktygstipset utformad för att visa en dialogruta med en titel, en multilinje text och en nära knapp. Det är en av sina egna på vår lista.

TipsJS - Ett enkelt jQuery-plugin, men det ger ganska tydliga egenskaper. De verktygstipsinnehållet är inställt med a data tooltip attribut. Dessutom kan vi även sätta in innehållet med specialtecken för att formatera innehållet liknande Markdown-formatering. Vi kan använda * för att göra innehållet fet, ~ för kursiv och ^ för rubrik.

Dark Tooltip - Detta bibliotek ger några riktigt användbara funktioner för att driva upp verktygstipset. Till exempel kan vi lägga till en Bekräfta knapp - Ja och Nej, dimma bakgrunden medan verktygstips visas och lägg till HTML-element till innehållet. Jag tror att du verkligen bör kolla in demosidan.

Aria Tooltip - Ett annat verktygstips med inbyggd tillgänglighetsfunktion är det här jQuery-pluginet WAI-ARIA 1.1-kompatibelt. Det är lyhörd på ett sätt som du kan tillhandahålla olika konfigurationer för olika visningsstorlekar. Aria Tooltip finns som en NPM-modul som heter t-aria-tooltip.

Toolbar.js - Medan det andra jQuery-pluginet bara får visa enkel text eller HTML-innehåll inom ett verktygstips, så här jQuery-plugin skapar en verktygsfält. Verktygstipset skulle innehålla två eller flera länkar med en ikon som normalt gör en åtgärd klick, som alla verktygsfält. Kolla in dokumentationen och exemplen.

VueJS

V-Tooltip - V-Tooltip är en Vue.js-komponent som drivs av Popper.js under huven. Det ger en nytt direktiv som heter v-tooltip som kan läggas till något element för att skapa ett verktygstips. De v-tooltip kan innehålla verktygstipsinnehållet eller alternativen. Bortsett från sedvanen v-tooltip Direktivet kan du också lägga till verktygstips med v-popover komponent. Med den här komponenten kan du Lägg till mer komplext innehåll i verktygstipset med Vue.js-komponenten eller HTML.

Vue-Bulma Tooltip - En Vue.js-komponent för att skapa verktygstips baserat på Bulma UI Framework. Detta bibliotek är en del av Vue Bulma. Men tooltip-komponent är tillgänglig som en namngiven NPM-modul vue-Bulma-tooltip att du kan använda detta som fristående komponenter.

Vue-direktiv-Tooltip - Sammantaget liknar det V-Tooltip komponent baserat på Popper.js och ger samma direktiv som heter v-tooltip. Det verkar dock inte ge v-popover komponent.

Vue-Tippy - Det här biblioteket omsluter Tippy.js till en Vue.js-komponent. Den har ett anpassat Vue.js-direktiv som heter v-tippy som fungerar som en HTML-attribut Vi kan lägga till innehåll för verktygstips eller alternativen för att anpassa det. Det gör också en anpassad Vue.js-komponent på verktygstipsinnehållet med hjälp av html alternativ.

VueJS-Popover - En anpassad Vue.js med ett anpassat direktiv som heter v-popover och två anpassade komponenter nämligen och vilket ger flexibilitet för utvecklare att lägga till verktygstips i Vue.js-applikationen.

Vue-Hint - Ett Vue.js-plugin som sveper Hint.css. Pluginfunktionerna v-ledtråd-css direktiv för att lägga till verktygstipset. Det ger samma uppsättning alternativ som Hint.css, så du kan lägga till dem som ett JavaScript-objekt eller Vue.js modifierare.

ReactJS

Reagera joyrid - En React-komponent för att visa en uppsättning verktygstips som ska vägleda nya användare för att bli bekant med din nya applikation.

React Floater - Det här biblioteket omsluter Popper.js till en React-komponent med namnet Floater, så det har samma bra funktioner som Floaters. Du kan lägga till verktygstips och popup, och du kan också leka med den här komponenten genom denna sandlåda.

React Autotip - En enkel React-komponent med auto-positioneringsfunktionen, eact Autotip will Justera automatiskt verktygstipsens position när det tillgängliga utrymmet runt det ändras.

React Tippy - Byggd på toppen av Tippy.js och Popover.js. Detta bibliotek introducerar en Tooltip komponent som Du kan inkludera i din React-applikation.

Reaktionstips - En React-komponent som sträcker sig Hint.css. Komponenterna lägger till några funktioner som inte är tillgängliga i Hint.css som automatisk position, fördröjning och återuppringning.

Mer

Ember Tooltips - En Ember.js-komponent för att skapa verktygstips, den är byggd ovanpå Popper.js. Komponenten är också utformad med tillgänglighet i åtanke och håller på att förbättras för att överensstämma med cirka 508 övertygelse i denna fråga.

D3 Tips - ett D3.js-plugin. D3.js är ett JavaScript-bibliotek för datavisualisering som diagram, kartor, diagram etc. Med denna plugin kan du visa verktygstips ovanpå dessa data.