Share
Verktygstips är ett bra sätt att förbättra ett användargränssnitt när användarna behöver lite extra kontext för den fina ikonen, eller när de vill ha viss försäkran om att klicka på en knapp, eller kanske ett påskäggsavsnitt att gå med en bild. Låt oss göra några animerade verktygstips, just nu, med ingenting annat än HTML och CSS.
Här är vad vi arbetar mot:
Innan vi blir nedsänkt i kålen, låt oss ta en titt på vad vi faktiskt brygger. Huvudmålet är att ha ett enkelt sätt att lägga till ett verktygstips, så vi gör det genom att lägga till ett eget verktygstips attribut:
Accentsconagua
synlig text eller ikon, etc..Om du letar efter 508-kompatibla verktygstips, eller behöver smartare verktygstips med kollisionsdetektering av behållare och / eller stöd för HTML-innehåll vs vanlig text, finns det många lösningar som använder tredjepartsskript för att lösa dessa behov för dig.
"JavaScript är absolut nödvändigt för att göra fullt tillgängliga interaktiva komponenter." - Sara Soueidan, Att bygga en fullt tillgänglig hjälpverktygstips ... är svårare än jag trodde
Denna handledning adresserar inte specifikt tillgänglighetsbehoven. Du känner dina användare och vad de behöver, så var noga med att överväga deras behov i detta avseende också.
Oh vänta. Vi har en asterisk att hantera först, om "inte behöver någon extra markup". Det här är magi, trots allt. Våra verktygstips gör det inte verkligen behöver några extra DOM-element eftersom de består helt av pseudo-element (the ::innan och ::efter saker) som vi kan styra via CSS.
Om du redan använder ett elements pseudoelement från en annan uppsättning stilar och vill ha ett verktygstips på det elementet, kan du behöva omstrukturera en liten bit.
Vänta. Gremlins! En ytterligare tillvägagångssätt: CSS positionering. För att verktygstipsen ska fungera korrekt måste deras föräldraelement (det som vi bifogar verktygstipset) vara
position: relativ, ellerposition: absolut, ellerposition: fastI grund och botten, något annat än position: statisk - det är standardläget läge som tilldelas nästan alla delar av webbläsaren. Verktygstipsen är placerade absolut och så måste de känna till gränserna i vilka deras absoluthet har mening. Standardpositionsdirektivet statisk deklarerar inte sina egna gränser och kommer inte att ge våra verktygstips ett sammanhang att trycka mot, så verktygstipsen kommer att använda nästa närmaste föräldraelement som har en deklarerad gräns.
Du måste bestämma vilket positionsdirektiv som fungerar bäst med hur du använder verktygstipsen. Denna handledning förutsätter position: relativ för moderelementet. Om din användargränssnitt är beroende av ett helt placerat element, kan det hända att en viss omstrukturering (extra markup) behövs för att distribuera ett verktygstips på det elementet.
Låt oss hoppa in och se vad som händer.
De flesta CSS-regler skrivs med klassnamn i åtanke, som .den här saken, men CSS har en handfull selektortyper. Våra magiska verktygstips ska använda attributväljare - det är kvadratfästet notation:
[foo] (bakgrund: rgba (0, 0, 0, 0,8); färg: #fff;
När webbläsaren möter något så här:
Kolla in det!Det kommer att veta att det måste appliceras [Foo] regler eftersom det taggen har ett attribut som heter foo. I det här fallet skulle spänningen själv ha en genomskinlig svart bakgrund med vit text.
HTML-element har olika inbyggda attribut, men vi kan också skapa egna. Tycka om foo, eller verktygstips. Som standard vet HTML inte vad det betyder, men med CSS kan vi berätta för HTML vad det betyder.
Vi använder attributväljare främst för att skilja problem. Att använda attribut över klassnamn ger oss inga bonuspoäng i specificitetskrigen; klasser och attribut har samma specificitet. Men genom att använda attribut kan vi hålla innehållet med innehållet eftersom HTML-attribut kan ha värden, medan klassnamn inte gör det.
Tänk på klassnamnet .verktygstips vs. attributet [Verktygstips] i detta exempel kod. Klassnamnet är ett av värdena för attributet [klass] medan verktygetipset tilldelas har ett värde, vilket är den text vi vill visa.
lorem ipsum lorem ipsum
Våra verktygstips kommer att använda två olika attribut:
verktygstips: Detta håller verktygetipsets innehåll (en vanlig textsträng)strömma: valfri; Detta gör det möjligt för oss att styra hur vi ska visa verktygetipset. Det finns många placeringar vi kan stödja men vi täcker fyra gemensamma placeringar:Nu, låt oss sätta upp markarbetet för alla verktygstips. Reglerna från steg 1-5 gäller för alla verktygstips oavsett vad strömma vi ger dem. Steg 6-7 har skillnader mellan de olika strömma värden.
Detta är för verktygstipsens moderelement. Låt oss tilldela ett positionsdirektiv så att den absoluta positioneringen av verktygstipsens delar (den ::innan och ::efter pseudo-element) placeras i sammanhanget med detta moderelement och inte i sammanhanget av sidan vid stor eller ett morföräldraelement eller något annat yttre element uppåt i DOM-trädet.
[verktygstips] position: relativ;
Det är dags att pröva pseudoelementen. Här ställer vi in gemensamma egenskaper för båda ::innan och ::efter bitar. De innehåll egendom är vad som faktiskt gör ett pseudo-element arbete, men vi kommer dit snart.
[verktygstips] :: före, [verktygstips] :: efter linjehöjd: 1; användarvälj: ingen; pekare-händelser: ingen; position: absolut; display: none; opacitet: 0; / * åsikter * / text-transform: ingen; typsnittstorlek: .9em;
Jag vet inte varför "dink" är meningsfullt, jag har bara alltid kallade det så. Detta är den lilla triangeln punktiga delen som ger verktygetips sina pratbubbla känner genom att peka på det som åberopade det. Observera att vi använder transparent för gränsen färgen; vi lägger till i färgen senare, hur vi lägger till det beror på verktygstipsens strömma.
[verktygstips] :: före innehåll: "; z-index: 1001; kant: 5px solid transparent;
Det är inte ett typsnitt som innehåll:"; deklarationen har en tom sträng för ett värde. Vi vill inte ha något där inne, men vi behöver den egenskapen för att pseudoelementet ska existera.
För att skapa en triangel definierar vi en solid kant med en viss tjocklek på en tom låda (ingen innehåll) utan bredd och ingen höjd och ger endast en sida av lådan en kantfärg. För mer information kolla in följande handledning:
Här är köttet av saken. Lägg märke till innehåll: attr (verktygstips) del säger, "Detta pseudo-element bör använda värdet av verktygstips attribut som innehåll ". Det är därför att använda attribut över klassnamn är så bra!
[verktygstips] :: efter innehåll: attr (verktygstips); / * magi! * / z-index: 1000; / * Det mesta av detta är åsikt * / font-family: Helvetica, sans-serif; text-align: center; / * Låt innehållet ställa in verktygstipsens storlek, men det kommer också att hindra dem från att vara obnoxious * / min-width: 3em; max bredd: 21em; white-space: nowrap; överflöde: gömd; textöverflöde: ellipsis; / * Synlig utformning av verktygstipsbubblorna * / vaddering: 1ch 1.5ch; gränsstråle: .3ch; boxskugga: 0 1em 2em -.5em rgba (0, 0, 0, 0.35); bakgrund: # 333; färg: #fff;
Lägg märke till z-index värden för både dink och bubblan. Dessa är godtyckliga värden, men kom ihåg att a z-index värdet är relativt. Betydelse: ett z-indexvärde på 1001 inom ett element med ett z-index på 3 betyder bara att 1001-elementet kommer att vara det högsta elementet inuti den där z-index: 3 behållare.
Bubblan är z-index bör vara minst ett steg ner från dink s z-index. Om det är samma som eller högre än tänkningen, kan du sluta med en inkonsekvent färgpåverkan på tänk om dina verktygstips använder en box-shadow.
För en mer detaljerad titt på z-indexegenskapen, ta en titt på följande handledning:
Våra verktygstips aktiveras genom att sväva musen över elementet med verktygstipset ... Nästan.
[verktygstips]: svep :: före, [verktygstips]: svep :: efter display: block;
Om du tittar tillbaka i vårt stilblock i steg 2 ska du se att vi har använt opacitet: 0; tillsammans med display: none; för våra verktygstipsdelar. Vi gjorde det så att vi kan använda CSS animeringseffekter när verktygstips visar och döljer.
De visa egendom kan inte animeras, men opacitet kan! Vi tar hand om animationerna senast. Om du inte bryr dig om animerade verktygstips, torka bara ut opacitet: 0; deklarationen från steg 2 och ignorera animationen i steg 7.
Det sista vi behöver som fortfarande gäller alla verktygstips är ett sätt att undertrycka ett verktygstips om det inte har något innehåll. Om du fyller verktygstips med ett slags dynamiskt system (Vue.js, Angular eller React, PHP, etc.) vill vi inte ha dumma tomma bubblor!
/ * Visa inte tomma verktygstips * / [tooltip = "] :: före, [tooltip ="] :: efter display: none! important;
Det här steget kan bli ganska komplicerat eftersom vi använder vissa inte så vanliga väljare för att hjälpa våra verktygstips att hantera sina placeringar baserat på deras strömma värden (eller brist på det).
"Det är konstiga saker i cirkel-K." - Ted Theodore Logan
Innan vi hoppar in i stilar, låt oss ta en titt på några väljarmönster vi ska använda.
[verktygstips]: inte ([flöde]) :: före, [verktygstips] [flöde ^ = "upp"] :: före / * ... egenskaper: värden ... * /
Detta berättar webbläsaren: "För alla element med a verktygstips ange det heller låt bli ha en strömma attribut, eller ha en strömma med ett värde som börjar med 'up': använd dessa stilar till dess ::innan pseudo-element.”
Vi använder ett mönster här så att de kan utökas till andra flöden utan att behöva upprepa så mycket CSS. Detta mönster flöde ^ = "upp" använder den ^ = (börjar med) matchare. Detta gör att stilar kan gälla även upprätt och upp till vänster Om du vill lägga till flödesregleringar. Vi kommer inte att täcka dem här, men du kan se dem använda på min ursprungliga verktygstips-demo på CodePen.
Här är CSS-blocken för alla fyra flöden som denna handledning täcker.
/ * ENDAST :: före * / [verktygstips]: inte ([flöde]) :: före, [verktygstips] [flöde ^ = "upp"] :: före botten: 100%; gränsbotten-bredd: 0; border-top-color: # 333; / * ENDAST :: efter * / [verktygstips]: inte ([flöde]) :: efter [verktygstips] [flöde ^ = "upp"] :: efter botten: calc (100% + 5px); / * Båda: före & :: efter * / [verktygstips]: inte ([flöde]) :: före, [verktygstips]: inte ([flöde]) :: efter [verktygstips] [flöde ^ = "upp "] :: före, [verktygstips] [flöde ^ =" upp "] :: efter vänster: 50%; transformera: translate (-50%, -.5em);
[verktygstips] [flöde ^ = "ner"] :: före topp: 100%; kantbredd: 0; gränsbottenfärg: # 333; [verktygstips] [flöde ^ = "nere"] :: efter topp: calc (100% + 5px); [verktygstips] [flöde ^ = "ner"] :: före, [verktygstips] [flöde ^ = "ner"] :: efter vänster: 50%; transformera: translate (-50%, .5em);
[verktygstips] [flöde ^ = "vänster"] :: före topp: 50%; gränsen till höger bredd: 0; border-left-color: # 333; vänster: calc (0em - 5px); transformera: translate (- 5em, -50%); [verktygstips] [flöde ^ = "vänster"] :: efter topp: 50%; höger: calc (100% + 5px); transformera: translate (- 5em, -50%);
[verktygstips] [flöde ^ = "rätt"] :: före topp: 50%; gränsen till vänster bredd: 0; border-right-color: # 333; höger: calc (0em - 5px); transformera: translate (.5em, -50%); [verktygstips] [flöde ^ = "rätt"] :: efter topp: 50%; vänster: calc (100% + 5px); transformera: translate (.5em, -50%);
Animationer är fantastiska. Animationer kan:
Våra verktygstips kommer att falla i den sista beskrivningen. Snarare än att få en textbubbla pop till existens och dyka upp i en blixt, låt oss göra dem mjukare.
Vi behöver två @keyframe animationer. Upp / ner verktygstips kommer att använda verktygstips-vert keyframe, och vänster / höger verktygstips kommer att använda verktygstips-horz nyckelbildruta. Observera i båda dessa nyckelbilder definierar vi bara önskat sluttillstånd för verktygstipsen. Vi behöver inte veta var de kommer från (verktygstipsen har själva stilinformationen). Vi vill bara kontrollera var de går till.
@keyframes tooltips-vert to opacity: .9; transformera: translate (-50%, 0); @keyframes verktygstips-horz till opacity: .9; transformera: translate (0, -50%);
Nu måste vi tillämpa dessa nyckelbilder på verktygstipsen när en användare svävar över utlösningselementen (elementen med [Verktygstips] attribut). Eftersom vi använder olika flöden för att kontrollera hur verktygetips ska visa, måste vi identifiera dessa möjligheter i stilerna.
[verktygstips]: inte [[flöde]): svävar :: före, [verktygstips]: inte ([flöde]): svävar :: efter [verktygstips] [flöde ^ = "upp"]: tooltip] [flöde ^ = "up"]: svävare :: efter, [verktygstips] [flöde ^ = "ner"]: svävar :: före [verktygstips] [flöde ^ = "ner"]: animering: verktygstips-vert 300ms lättare framåt; [verktygstips] [flöde ^ = "vänster"]: svävar :: före, [verktygstips] [flöde ^ = "vänster"]: svävar :: efter, [verktygstips] [flöde ^ = "höger"] före, [verktygstips] [flöde ^ = "höger"]: svep :: efter animering: verktygstips-horz 300ms lindra framåt;
Kom ihåg att vi inte kan animera visa egendom, men vi kan ge verktygetips en försvagning genom att manipulera opacitet. Vi animerar också transformationsegenskapen som ger verktygetips en subtil rörelse som om de flyger in för att peka på deras utlösande element.
Lägg märke till framåt sökord i animeringsdeklarationen. Detta berättar att animationen inte återställs när den är klar, men att fortsätta framåt och stanna i slutet.
Fantastiskt jobb! Vi omfattade mycket i denna handledning och har nu en snygg samling verktygstips för att visa för vårt hårda arbete:
Vi har bara repat ytan på vad som kan göras med CSS verktygstips. Ha det roligt att leka med dem och fortsätta experimentera och samla dina egna recept!
