Det finns många tutorials online som diskuterar idén om CSS-baserade verktygstips. Men många exempel kräver HTML-element tillsammans med ankarlänken. Besökare kan få ett grundläggande verktygstipsmeddelande med hjälp av standardtitelattributet. Jag skulle vilja följa den här metoden och uppdatera processen bara en liten bit.
I denna handledning vill jag demonstrera hur man bygger CSS3-verktygstips som är kontextuella baserade på en HTML5-attribut. Med olika klasser kan vi införliva unika färgscheman tillsammans med CSS3-övergångseffekter. Denna teknik kräver ingen extra HTML om du inte bifogar verktygstipsen till ett annat element (som ett textfält). Låt oss börja!
Live Demo - Hämta källkod
Komma igång
Sidan är ganska tråkig, så jag vill främst fokusera på CSS-koden. Varje ankarlänk ges ett verktygstips baserat på klassen .tooltip. Med hjälp av HTML5-datasyntaxen drar jag texten från ett namn som heter uppgifter-tool.
Det är bäst att undvika titel attribut eftersom det här visar en annan webbläsarbaserad verktygstips ovanpå CSS. Vi kan ändra riktningen för varje verktygstips med ytterligare klasser på ankarlänken. En annan klass .animera kommer att tillämpa övergångar till effekten också.
Min ursprungliga idé startade från denna handledning som använder ett större grupperat kodkod. Tyvärr författaren föreslår att man använder alttext för verktygstiteln, men alt får inte placeras på ankarlänkar. Således har jag omprövat tipsen och uppdaterad till renare HTML5 / CSS3-kod.
Bygga Tooltip
Det bästa stället att börja tittar på den generiska koden innan något ska visas på sidan. Ankarlänkar kan använda :efter och :innan pseudo-element som ska appliceras med hjälp av CSS. Detta gör det möjligt för utvecklare att anpassa lite innehåll före och efter vilket som helst tillämpligt element. I det här fallet kommer jag att skapa en triangelverktygstips tillsammans med en separat bubbellåda.
Ankarlänken i sig är placerad relativt så att pseudoelementen kan appliceras med användning av absolut positionering. Detta gör det lättare att passa bubblan och triangeln tillsammans i ett verktygstips. visibility: hidden kommer hålla spetsen ur användarens syn tills de specifikt svävar en länk. Annars är verktygetipset svängbart men sitter vid 0% opacitet.
Du kommer att märka att standardbakgrunden använder en genomskinlig RGBA () miljö. : innan innehåller triangeln koden medan: efter innehåller verktygstipsbubblan och text med egenskapen innehåll: attr (data-verktyg).
Du märker längst ner i mitt kodprov vi uppdaterar positionen närhelst en användare svänger på ankarlänken. Denna position kommer att ändras för varje separat verktygstipsplats tillsammans med gränsstilar för pilen.
Positionsklasser
Du kan ansöka en extra klass på ankarlänken för att tvinga en viss verktygstipsplats. Standard visas ovanpå texten och övriga klasser är .höger, .vänster, och .botten.
Bottenpositionen använder pixlar tillsammans med standard topposition. Men jag ville också visa hur man applicerar stilar med hjälp av procentandelar på vänster / höger verktygstips.Det är bäst att hålla fast vid en enhet som liknar din stycktext så att allt stannar i proportion.
Procenten behövs ofta för horisontell positionering eftersom vi inte alltid känner till en länks pixelbredd. Skalbara ems är ett annat val när man hanterar teckensnitt, men positionering kan bli svårt.
Den enda andra ändras bortsett från positionen är kantbredder och färger. Detta appliceras på :innan element eftersom det riktar sig mot varje triangel. Positionen dikterar hur triangeln ser ut och vilken sida av bubblan den behöver visas.
Extra CSS-format
De två extraklasserna är för att återställa verktygstips och använda animerade effekter på skärmen.
Färg klass koder är mycket enkla men också täta och repetitiva. Detta block med kod är för en enda färgpalett av blå. Verktygstipset :efter väljaren behövs bara en gång för att uppdatera bubblans bakgrund. Vi behöver 4 selektorer riktade mot varje pil i förhållande till de 4 positionerna i verktygstipset.
Färger måste appliceras på olika gränser för olika triangelpositioner. Lyckligtvis är det väldigt enkelt att kopiera / klistra in och uppdatera med ditt eget färgschema.
Eftersom verktygetipsbubblan och triangeln kan animeras tillsammans har jag skrivit en väljare för båda. De använder samma animeringsstil för att hålla allt flytande. Allt du behöver göra är att lägga till .animera klass på alla verktygstipsankare.
Bifoga till andra delar
Den sista delen av denna handledning förklarar hur man använder dessa verktygstips för element som inte har någon före / efter pseudo-support. Den angränsande syskonväljaren är viktig i förhållande till verktygstipset - gärna ändra den här koden om du behöver rikta in mer specifika element.
Du kommer märka att de flesta av fastigheterna ser väldigt ut som tidigare. Vi drar fortfarande innehåll från dataverktyget och tipsen visas bara när en användare fokuserar på ett inmatningsfält. De .fieldtip klassen kan läggas till på något element. Jag har valt ett spann som du ser i min HTML:
Även med dessa externa verktygstips har jag hållit animeringsegenskaperna bifogade. Du kan försöka ändra saker med en annan färg, teckensnittstorlek eller ett antal ytterligare CSS-egenskaper.
Live Demo - Hämta källkod
Stängning
Jag tycker att dessa verktygstips ger en utmärkt startmall för anpassning. Du kan ta bort eller ändra någon av egenskaperna för att få olika bakgrundsfärger, animationsstilar eller bildbaserade trianglar. Tänk på att både de animerade effekterna tillsammans med CSS-trianglarna kan visas buggy i äldre webbläsare. Försök ladda ner en kopia av min kod och se vad du kan bygga för dina egna projekt.