Share
Verktøytips er en fin måte å forbedre et brukergrensesnitt når brukerne trenger litt ekstra kontekst for det fancy ikonet, eller når de vil ha litt beroligelse for å klikke på en knapp, eller kanskje et påskeeggsskilt for å gå sammen med et bilde. La oss lage noen animerte verktøytips, akkurat nå, med annet enn HTML og CSS.
Her er det vi jobber med:
Før vi blir nedsenket i kjelen, la oss ta en titt på hva vi faktisk brygger. Hovedmålet er å ha en enkel måte å legge til et verktøytips på, så gjør vi det ved å legge til en egendefinert verktøytips Egenskap:
Accentsconagua
synlig tekst eller ikon mv.Hvis du er ute etter 508-kompatible verktøytips, eller trenger smartere verktøytips med kollisjonsdetektering av containere og / eller støtte for HTML-innhold versus ren tekst, er det mange løsninger som bruker tredjepartsskript for å løse disse behovene for deg..
"JavaScript er avgjørende for å lage fullt tilgjengelige interaktive komponenter." - Sara Soueidan, Å bygge et fullt tilgjengelig hjelpverktøystip ... er vanskeligere enn jeg trodde
Denne opplæringen omhandler ikke spesifikt tilgjengelighetsbehov. Du kjenner dine brukere og hva de trenger, så vær sikker på å vurdere deres behov i dette henseende også.
Å vent. Vi har en stjerne for å håndtere først, om "ikke trenger noen ekstra oppslag". Dette er magi, tross alt. Våre verktøytips gjør det ikke egentlig trenger ekstra DOM elementer som de består helt av pseudo-elementer (the ::før og ::etter tingene) som vi kan styre via CSS.
Hvis du allerede bruker et elements pseudoelementer fra et annet sett med stiler, og du vil ha et verktøytips på det elementet, må du kanskje omstrukturere en litt bit.
Vente. Gremlins! En ekstra advarsel: CSS posisjonering. For at verktøytipsene skal fungere ordentlig, må deres foreldreelement (den tingen vi knytter til verktøytipset) være
stilling: relativ, ellerposisjon: absolutt, ellerposisjon: fastI utgangspunktet, noe annet enn stilling: statisk - det er standardposisjonsmodus som tildeles stort sett alle elementer av nettleseren. Verktøytipsene er plassert helt og så må de vite grensene der absoluttheten deres har betydning. Standardposisjonsdirektivet statisk ikke erklære sine egne grenser og vil ikke gi våre verktøytips en kontekst for å presse mot, så verktøytipsene vil bruke neste nærmeste foreldrelement som har en deklarert grense.
Du må bestemme hvilket stillingsdirektiv som fungerer best med hvordan du bruker verktøytipsene. Denne opplæringen antar stilling: relativ for foreldreelementet. Hvis brukergrensesnittet ditt er basert på et helt posisjonert element, kan det også være nødvendig med en restrukturering (ekstra markup) for å distribuere et verktøytips på det elementet.
La oss hoppe inn og se hva som skjer.
De fleste CSS-regler er skrevet med klassenavn i tankene, som .denne tingen, men CSS har en håndfull selektortyper. Våre magiske verktøytips kommer til å bruke attributtvelger-det er kvadratkonsollnotasjonen:
[foo] (bakgrunn: rgba (0, 0, 0, 0,8); farge: #fff;
Når nettleseren møter noe slikt:
Sjekk det ut!Det vil vite at det må brukes [Foo] Regler fordi det tag har en attributt som heter foo. I dette tilfellet vil spenningen i seg selv ha en gjennomsiktig-svart bakgrunn med hvit tekst.
HTML-elementer har forskjellige innebygde attributter, men vi kan også lage vår egen. Som foo, eller verktøytips. Som standard vet HTML ikke hva dette betyr, men med CSS kan vi fortelle HTML hva dette betyr.
Vi bruker attributtvelger primært for å skille mellom bekymringer. Ved å bruke attributter over klassenavn får vi ikke noen bonuspoeng i spesifisitetskrigene; klasser og attributter har samme spesifisitet. Men ved å bruke attributter kan vi beholde innholdet vårt med innholdet som HTML-attributter kan ha verdier, mens klassenavn ikke gjør det.
Vurder klassenavnet .verktøytips versus attributten [Tooltip] i dette eksempelkoden. Klassenavnet er en av verdiene for attributtet [klasse] mens verktøytipsattributtet har en verdi, som er teksten vi vil vise.
lorem ipsum lorem ipsum
Våre verktøytips vil bruke to forskjellige attributter:
verktøytips: Dette innehar verktøytipsets innhold (en ren tekststreng)strømme: valgfri; Dette gjør det mulig for oss å kontrollere hvordan du kan utsette verktøytipset. Det er mange plasseringer vi kan støtte, men vi dekker fire vanlige plasseringer:La oss nå sette opp grunnarbeidet for alle verktøytips. Reglene fra trinn 1-5 gjelder for alle verktøytips uavhengig av hva strømme vi gir dem. Trinn 6-7 har forskjeller mellom de forskjellige strømme verdier.
Dette er for verktøytipsets foreldreelement. La oss tildele et stillingsdirektiv slik at absolutt posisjonering av verktøytipsens deler (the ::før og ::etter pseudo-elementer) er plassert i sammenheng med dette foreldreelementet og ikke i sammenheng med siden i stor eller et besteforeldreelement eller et annet ytre element opp i DOM-treet.
[verktøytips] posisjon: relativ;
Det er på tide å pseudo-elementene. Her stiller vi felles egenskaper til begge ::før og ::etter stykker. De innhold eiendom er det som faktisk gjør et pseudo-element arbeid, men vi kommer snart dit.
[verktøytips] :: før, [verktøytips] :: etter linjehøyde: 1; brukervalg: ingen; peker-hendelser: ingen; posisjon: absolutt; skjerm: ingen; opasitet: 0; / * meninger * / tekst-transform: ingen; skriftstørrelse: .9em;
Jeg vet ikke hvorfor "dink" gir mening, jeg har nettopp alltid kalt det som. Dette er den lille trekantige delen som gir verktøytipsene deres snakkeboble føler ved å peke på det som påkalte det. Legg merke til at vi bruker gjennomsiktig for grensen farge; vi vil legge til i fargen senere som hvordan vi legger til det, avhenger av verktøytipset strømme.
[verktøytips] :: før innhold: "; z-indeks: 1001; kantlinje: 5px solid gjennomsiktig;
Det er ikke en skrivefeil som innhold:"; erklæringen har en tom streng for en verdi. Vi vil ikke ha noe der inne, men vi trenger den egenskapen for at pseudoelementet skal eksistere.
For å lage en trekant definerer vi en solid ramme med en tykkelse på en tom boks (ingen innhold) uten bredde og ingen høyde, og gir bare en side av boksen en kantfarge. For mer informasjon, sjekk ut følgende veiledning:
Her er kjøttet til saken. Legg merke til innhold: attr (tooltip) del sier, "Dette pseudo-elementet skal bruke verdien av verktøytips attributt som innhold. "Dette er grunnen til at bruk av attributter over klassenavn er så flott!
[tooltip] :: etter content: attr (tooltip); / * magi! * / z-indeks: 1000; / * det meste av dette er mening * / font-familie: Helvetica, sans-serif; tekst-align: center; / * La innholdet sette størrelsen på verktøytipsene, men dette vil også holde dem fra å være motbydelig * / min bredde: 3em; maksimal bredde: 21em; hvit-rom: nowrap; overløp: skjult; tekstoverløp: ellipsis; / * synlig utforming av verktøytipsbobler * / polstring: 1ch 1.5ch; border-radius: .3ch; boks-skygge: 0 1em 2em -.5em rgba (0, 0, 0, 0.35); bakgrunn: # 333; farge: #fff;
Legg merke til z-indeks verdier for både dink og boblen. Disse er vilkårlig verdier, men husk at a z-indeks verdien er relativ. Betydning: En z-indeksverdi på 1001 inne i et element med en z-indeks på 3 betyr bare at 1001-elementet vil være det øverste elementet innsiden at z-indeks: 3 container.
Boblen er z-indeks bør være minst ett skritt ned fra dink's z-indeks. Hvis det er det samme som eller høyere enn tenningen, kan du ende opp med en inkonsekvent fargeløsning på dink hvis verktøytipsene dine bruker en box-shadow.
For et mer detaljert titt på z-indeksegenskapen, ta en titt på følgende veiledning:
Våre verktøytips aktiveres ved å sveve musen over elementet med verktøytipset ... Nesten.
[verktøytips]: svever :: før, [verktøytips]: svever :: etter display: block;
Hvis du ser tilbake på stilblokken i trinn 2, bør du se at vi har brukt opasitet: 0; sammen med skjerm: ingen; for våre verktøytipsdeler. Vi gjorde dette, slik at vi kan bruke CSS animasjonseffekter når verktøytipsene viser og skjuler.
De vise Egenskapen kan ikke animeres, men opasitet kan! Vi skal håndtere animasjonene sist. Hvis du ikke bryr deg om animerte verktøytips, tørker du bare ut opasitet: 0; erklæring fra trinn 2 og ignorere animasjonen i trinn 7.
Det siste vi trenger som fortsatt gjelder for alle verktøytipsene, er en måte å undertrykke et verktøytips hvis det ikke har noe innhold. Hvis du fyller verktøytips med et slags dynamisk system (Vue.js, Angular eller React, PHP, etc.), vil vi ikke ha dumme tomme bobler!
/ * Vis ikke tomme verktøytips * / [tooltip = "] :: før, [tooltip ="] :: etter display: none! important;
Dette trinnet kan bli ganske komplisert, ettersom vi bruker noen ikke så vanlige seleksjoner for å hjelpe våre verktøytips å håndtere plasseringene basert på deres strømme verdier (eller mangel derav).
"Det er merkelige ting på Circle-K." - Ted Theodore Logan
Før vi hopper inn i stilene, la oss ta en titt på noen valgmønstre vi skal bruke.
[verktøytip]: ikke ([flyt]) :: før, [verktøytip] [flyt ^ = "opp"] :: før / * ... egenskaper: verdier ... * /
Dette forteller nettleseren: "For alle elementene med en verktøytips tilskrive det heller ikke ha en strømme attributt, eller ha en strømme med en verdi som begynner med 'opp': bruk disse stilene til dens ::før pseudo-element “.
Vi bruker et mønster her, slik at disse kan utvides til andre strømmer uten å måtte gjenta så mye CSS. Dette mønsteret flyt ^ = "opp" bruker den ^ = (starter med) matcher. Dette tillater at stilene også gjelder for oppreist og Opp til venstre bør du legge til disse flytkontrollene. Vi kommer ikke til å dekke dem her, men du kan se dem i bruk på min originale tooltip-demo på CodePen.
Her er CSS-blokkene for alle fire flyter denne opplæringen dekker.
/ * BARE :: før * / [verktøytip]: ikke ([flyt]) :: før, [verktøytip] [flyt ^ = "opp"] :: før bunn: 100%; Bunnbredde: 0; border-top-farge: # 333; / * KUN den :: etter * / [verktøytip]: ikke [[flyt]) :: etter, [verktøytip] [flyt ^ = "opp"] :: etter bunn: calc (100% + 5px); / * Begge: før & :: etter * / [verktøytip]: ikke ([flyt]) :: før, [verktøytip]: ikke ([flyt]) :: etter, [verktøytip] [flyt ^ = "opp "] :: før, [tooltip] [flow ^ =" up "] :: etter left: 50%; transformere: translate (-50%, -.5em);
[tooltip] [flow ^ = "down"] :: før topp: 100%; kantlinjebredde: 0; border-bottom-farge: # 333; [tooltip] [flow ^ = "down"] :: etter topp: calc (100% + 5px); [tooltip] [flow ^ = "down"] :: før, [verktøytips] [flyt ^ = "ned"] :: etter left: 50%; transformere: translate (-50%, .5em);
[tooltip] [flow ^ = "left"] :: før topp: 50%; Grense-høyre bredde: 0; border-left-color: # 333; venstre: calc (0em - 5px); transformere: oversette (- 5em, -50%); [tooltip] [flow ^ = "left"] :: etter topp: 50%; høyre: kalk (100% + 5px); transformere: oversette (- 5em, -50%);
[tooltip] [flow ^ = "right"] :: før topp: 50%; border-left-width: 0; border-right-color: # 333; høyre: calc (0em - 5px); transformere: oversette (.5em, -50%); [tooltip] [flow ^ = "right"] :: etter topp: 50%; venstre: calc (100% + 5px); transformere: oversette (.5em, -50%);
Animasjoner er fantastiske. Animasjoner kan:
Våre verktøytips vil falle inn i den siste beskrivelsen. Snarere enn å ha en tekstboblepop til eksistens, og hoppe ut i et blunk, la oss lage dem mykere.
Vi trenger to @keyframe animasjoner. Opp / ned verktøytips vil bruke verktøytips-vert keyframe, og venstre / høyre verktøytips vil bruke verktøytips-horz keyframe. Merknad i begge disse nøkkelrammene definerer vi bare ønsket sluttstilling av verktøylinjene. Vi trenger ikke å vite hvor de kommer fra (verktøytipsene selv har den stilinformasjonen). Vi vil bare kontrollere hvor de går til.
@keyframes tooltips-vert til opacity: .9; transformere: translate (-50%, 0); @keyframes tooltips-horz til opacity: .9; transformere: translate (0, -50%);
Nå må vi bruke disse nøkkelrammene til verktøytipsene når en bruker svinger over utløsningselementene (elementene med [Tooltip] egenskaper). Siden vi bruker ulike strømmer for å kontrollere hvordan verktøytipsene vil vise, må vi identifisere disse mulighetene i stilene.
[verktøytip]: ikke [[flyt]): svever :: før, [verktøytip]: ikke ([flyt]): svever :: etter, [verktøytip] [flyt ^ = "opp"]: svever :: før [ verktøylipp] [flyt ^ = "opp"]: svever :: etter, [verktøytip] [flyt ^ = "ned"]: svever :: før, [verktøytip] [flyt ^ = "ned"]: svever :: etter animasjon: verktøytips-vert 300ms utelukkende fremover; [verktøytip] [flyt ^ = "venstre"]: svever :: før, [verktøytip] [flyt ^ = "venstre"]: svever :: etter, [verktøytip] [flyt ^ = "høyre"]: svever :: før, [verktøytip] [flyt ^ = "høyre"]: svever :: etter animasjon: verktøyløsninger-horz 300ms utløser fremover;
Husk at vi ikke kan animere vise eiendom, men vi kan gi verktøytipsene en fade-in effekt ved å manipulere opasitet. Vi animerer også transformasjonsegenskapen som gir verktøytipsene en subtil bevegelse som om de flyr inn for å peke på deres utløsende elementer.
Legg merke til forover søkeord i animasjonsdeklarasjonen. Dette forteller at animasjonen ikke tilbakestilles når den er fullført, men å fortsette fremover og forbli på slutten.
Fantastisk jobb! Vi dekket mye i denne opplæringen, og har nå en fin samling verktøytips for å vise for vårt harde arbeid:
Vi har bare riper overflaten av hva som kan gjøres med CSS verktøytips. Ha det gøy å leke med dem og fortsett å eksperimentere, og concocting dine egne oppskrifter!
