Verktygstips är fantastiska, det är helt enkelt ingen förneka det. De ger ett enkelt, förutsägbart och enkelt sätt att ge användarna användbar, kontextkänslig information och de ser coola ut för att starta.
Vi är alla överens om hur bra verktygstips är, men hur vi går att implementera dem kan skilja sig dramatiskt. Om du är på torget, letar du efter några verktygstipsidéer för ditt nuvarande projekt, har du kommit till rätt ställe. Vi har en hel del tjugofem olika alternativ som faller i två kategorier: JavaScript och CSS. Oavsett vilken metod du vill använda, har vi de bästa teknikerna, som du kanske vill förbättra med hjälp av OOP-klasstekniker som JavaScript-klasser med hjälp av JS ++-programmeringsspråket av Roger Poon.
JavaScript & jQuery
Tippade - jQuery Tooltip
Låt oss hoppa över tanken på att spara det bästa för sist. Om du inte vill sätta igenom tjugofem olika alternativ och ta reda på vilket som är bäst, ladda bara Tipped. Verktygstipsen är attraktiva, enkla att implementera och det finns massor av alternativ att välja mellan. Du har svårt att fylla på den här.
Opentip - Det fria verktygstipset
Opentip är ett annat verktygslåda plugin. Som Tipped finns det massor av alternativ så att du kan göra ganska mycket vad du vill med dem. Designen av tipsen själva visar lite mer karaktär än de för Tipped, vilket kanske eller kanske inte är en bra sak för ditt projekt.
Javascript Tooltip
Enkel men effektiv. Den här ger dig positioneringsalternativ, möjliggör bildinställningar och kan utlösas av ett antal olika händelser.
SkinnyTip JavaScript Tooltip Library
Den här är inte det mest attraktiva alternativet, men det är ganska lätt. Hela biblioteket är mindre än 10kb så att du inte behöver oroa dig för att sakta ner din sida. Det verkar visserligen lite gammalt, men det fungerar fortfarande.
qTip - Plugin för jQuery-verktygstips
qTip fungerar i alla större webbläsare, försämras snyggt när JavaScript är inaktiverat, är enkelt placerat och har animeringar och rundade hörn. Det är en riktigt solid plugin och jag rekommenderar starkt att du kolla in det. Titta även på version 2.
Simpletip - En enkel jQuery tooltip plugin
Simpletip är precis som annonserat. Det ser inte bara enkelt ut, det är super lätt att använda också. Det finns också några visuella lastningseffekter som du kan dra nytta av om du vill ta saker längre.
Tooltipster - Plugin för jQuery Tooltip
Ditch plugins som har funnits sedan Netscape. Tooltipster är ett modernt, HTML5-giltigt, fantastiskt verktygstips-plugin. Det är lätt, snabbt, webbläservänligt och enkelt utformat med CSS.
Tooltip - jQuery UI
jQuery-användare behöver inte gå långt för att hitta bra, robusta verktygstips, de är byggda direkt in i jQuery UI. De är väldigt enkla och oddsen hittar du massor av andra saker i biblioteket som gör din webbplats också bättre.
TipTip jQuery-plugin
Jag älskar allt som Drew Wilson gör. Han är killen bakom Screeny, Space Box, Pictos och en massa andra coola saker. Det faktum att han gjorde det här pluginet är tillräckligt för att jag ska ladda ner den. På mindre än 3,5 kb är den här superlätta och super fantastisk.
Tooltipsy
Tooltipsy sätter funktionaliteten i händerna på JavaScript och använder sedan klart, lättanpassat CSS för allt annat. Ändra utseendet, storleken, animationen; gå nötter och gör det själv.
Berusad
Tipsy ger dig mycket minimala och snygga verktygstips utan en massa fluff. Den har alla funktioner som du behöver, som positionering och blekna, och inget överflödigt att du aldrig kommer att använda.
Responsive och Mobile-Friendly Tooltip
Detta är ett verktygstips för nästa generations webbdesign. Det anpassar sig enkelt till vilken storlek som helst, och visar tydligt verktygstipset i en storlek och position som är optimerad för den aktuella skärmen. Om du gör lyhörd design, och du borde vara, bör du titta på responsiva verktygstips.
aToolTip - En enkel jQuery Tooltip av Ara Abcarians
aToolTip kan du få en verktygstips som ständigt rör sig med din markör eller stannar över sitt partnerobjekt. Den har sväng- eller klickalternativ, är under 4kb och har återuppringningsfunktioner.
Colortip - en jQuery Tooltip-plugin
Att ladda ner ett förbyggt verktygsplugin är coolt, men varför inte ta det och lära dig att bygga en? Colortip är en gratis nedladdning, men det är en del av en djupgående steg-för-steg-handledning för att bygga plugin från början.
ChillTip jQuery Plug-In
ChillTip är ett anmärkningsvärt flexibelt verktygstips plugin som gör att du kan implementera tipsen på ett antal olika sätt. Den kan användas med span, img, ankareattribut och? Ganska mycket annat som använder titelattributet.?
Pop! Enkel pop menyer med jQuery
Det här är inte ganska ett verktygstips, men det är nära besläktade så jag trodde att jag skulle inkludera det ändå. I stället för att ha lite popup på svävar, ger detta dig en liten klickbar dropdown där du kan dölja extra information.
CSS Tooltips
CSS Tooltips
För att starta CSS tooltip-sektionen vänder vi till mästareutvecklaren David Walsh. Denna handledning fokuserar mer på hur man skapar den klassiska verktygstipsformen med CSS och mindre om hur man framgångsrikt kan implementera och ren CSS tooltip.
CSS Tooltip
Detta är ett riktigt fantastiskt verktyg som gör att du enkelt kan bygga rena CSS-verktygstips genom att fylla i några fält. Du kan helt anpassa utseendet och innehållet med hjälp av det enkla formuläret, ta sedan koden och klistra in den i ditt projekt.
Sexiga verktygstips med bara CSS
En bra handledning på Six Revisions för att skapa riktigt robusta och attraktiva verktygstips med hjälp av CSS. Stilen är en slags varningsdialog med en ikon och en färgad ruta.
CSS Tooltip
En enkel, lättvärd, cross-browser, ren CSS verktygstips. Det är en gratis nedladdning och tar bara upp en enda måttlig kb.
CSS Bubble Tooltips
En enkel, bubblig CSS verktygstips. Inte mycket här, men det fungerar bara bra!
Lätt CSS Tooltip
Den här kallas? Easy CSS Tooltip? av en anledning. Det tar fyra rader av kod: en rad HTML och tre rader av CSS. Det är allt! Det blir inte mycket lättare folk.
CSS verktygstips och talbubblor
I denna artikel experimenterar Konigi med två olika metoder för att leverera rena CSS-verktygstips. Den första använder titeln och den andra använder en spänning.
CSS Tooltips av Adam Whitcroft
Här lär Adam Whitcroft dig att bygga verktygstips med dataattribut. Det kan låta lite läskigt, men de är faktiskt väldigt lätta att använda. Var noga med att ge den här en läsning.
Ren CSS Tooltips - Trezy.com
Här författar författaren en uppsättning solida mål som IE8-kompatibilitet och minimal HTML, så visar du hur han byggt några rena CSS-verktygstips som uppfyller dessa mål. Om du vill ha ett CSS-verktygstips som kan användas i en professionell webbläsarmiljö, är det här en bra läsning.
Vad använder du för Tooltips?
Nu när du har sett dessa tjugofem verktygsverktyg, är det dags att komma dit och börja göra verktygstips! Lämna en kommentar nedan och berätta vilken resurs du tycker om bäst eller om du hittade några som inte var listade ovan.