Share
Vi har nylig lagt opp en veiledning om hvordan du lager skriptfrie CSS3-verktøytips? I dag legger vi inn en script-forbedret versjon som er SEO-vennlig og brukt en liten jQuery-magi for å gjøre det animere seg til museposisjonen!
Verktøytips brukes til å vise ekstra informasjon når en kobling er svevet på. Når vi lager lenker i vår nettside, er det alltid en god praksis å legge til titler på linkene til fordel for SEO. Disse titlene vises når du svinger over en lenke, men det mangler noen merkevarebygging eller tilpasset styling. I denne opplæringen vil jeg veilede deg gjennom prosessen med:
På den måten vil vi øke brukeropplevelsen, samtidig som vi holder alt godt og rent for søkemotorer og SEO-fordeler.
La oss begynne med å først legge til markeringen inni hode av dokumentet vårt. Vi la til to stilark:
"Style.css" og "Tooltips.css". Du kan fjerne den sistnevnte når du vil implementere ditt eget arbeid, men vi bruker det i demoen. Stilarket
"Style.css" inneholder alle CSS-stilene som vil formatere våre verktøytips. Vi har også lagt til JQuery Javascript-bibliotekets referanse. Nå er her dokumenthodetoppslaget vårt.
Linkverktøystips ved hjelp av CSS3 og JQuery
Nå må vi legge til merket for koblingene med verktøylinjer. I min tilnærming til å lage lenker for å vise verktøytips, må vi legge til en lenke med klassetributtet
"Tooltip_link". Dette vil stile det grunnleggende verktøytipset, og vi legger til et ekstra klassenavn av enten
"venstre", "senter" eller "Ikke sant" å spesifisere posisjonen til verktøylinjepilen i henhold til henholdsvis nederst til venstre, senter eller høyre. Til slutt legger vi til noen titler til koblingene som skal vises. Nå er det koblingene.
Tooltip left Tooltip center Tooltip right
Nå må vi avgjøre hvordan verktøytipsmarkeringen skal være slik at vi kan basere våre stiler og koding basert på den. Vi vil bruke en grunnleggende
"Div" tag med klasseattributt av "Verktøytips" og et av disse klassenavnene
"venstre", "senter" eller "Ikke sant". Inne i den, vil vi plassere teksten til verktøytipset. Nå er det verktøylettoppslaget.
Noen verktøytips tekst
Først begynner vi ved å utforme lenken selv ved å sette sin posisjon til "slektning" slik at vi kan plassere verktøytipset i forhold til lenken.
a.tooltip_link posisjon: relative! viktig;
Nå må vi legge til CSS-stilen for det grunnleggende verktøytipset som vi bruker klassenavnet
"Verktøytips". Vi må gjemme verktøytipset slik at det kan vises ved hjelp av JQuery når lenken er svevet, sett stillingen til
"Absolutt" slik at vi kan sette posisjonen i forhold til selve lenken, sett bredden til
200px, en 5px polstring, bunnmargin på
12px For å lage en plass til pilen, sett tekstfarge til hvit, z-indeks til
100 å være på toppen av alt innhold, 100% fra bunnen, sett bakgrunnsfargen til
gjennomsiktig blå farge med noen skrift og tekst stiler.
Husk at du kan endre stylingen til hva du ønsker, demoen kommer til å bruke bevisst enkle visuelle stiler for enkelhets skyld.
.tooltip display: none; posisjon: absolutt! viktig; bredde: 200px; bakgrunn: rgba (61.102.143,0,9); polstring: 5px; margin: 0 0 12px 0; farge: #fff; z-indeks: 100; bunn: 100%; tekst-align: center; font-weight: bold; skriftstørrelse: 11px;
La oss legge til den generelle stilen for verktøytip-pilen ved å bruke puesdo-elementer
"etter" og "før". Vi stiler på "etter" puesdo element som vil danne full pilen til venstre og høyre og halvparten av pilen i midten verktøytips ved å sette den til å ikke ha noe innhold, absolutt posisjon, angi kantfarge det samme som vi brukte for tooltip bakgrunnen med full bredde og
"-14px" fra bunnen av verktøytipset. De "før" puesdo-elementet har nesten samme stil som
"etter" puesdo element.
.tooltip: etter content: ""; posisjon: absolutt! viktig; bunn: -14px; z-indeks: 100; grense: 0 solid rgba (61.102.143,0.9); border-bunn: 14px solid gjennomsiktig; bredde: 100%; .tooltip: før innhold: ""; posisjon: absolutt! viktig; grense: 0 solid rgba (61.102.143,0.9); bunn: -14px; z-indeks: 100;
For å style verktøytipset med venstre pil bruker vi "venstre" klasse vi stiler klassen med en kantlinje fra alle hjørner unntatt den nederst til venstre, så stiler vi den venstre grensen og stillingen fra lengst til venstre for "etter" puesdo-elementet. For høyre pil endrer vi bare kantlinjens radius og setter den rette grensen og plasserer den fra høyre. Senterpilen verktøytipset vil vi sette grensen radius til alle hjørner, nå her må vi style begge
"etter" og "før" puesdo elementer. De
"etter" puesdo element har en venstre grense med 50% av bredden og
50% fra venstre, den "før" puesdo element har en høyre kant og gjennomsiktig bunngrense, med
50% av bredden og 50% fra høyre.
.tooltip.left border-radius: 5px 5px 5px 0; .tooltip.left: etter border-left-width: 14px; venstre: 0; .tooltip.right border-radius: 5px 5px 0 5px; .tooltip.right: etter border-right-width: 14px; høyre: 0; .tooltip.center border-radius: 5px; .tooltip.center: etter border-left-width: 10px; bredde: 50%; venstre: 50%; .tooltip.center: før border-right-width: 10px; border-bunn: 14px solid gjennomsiktig; bredde: 50%; høyre: 50%;
For å få ønsket funksjonalitet må vi legge til vår JQuery-kode inne i et skript-tag før den avsluttende kroppsmerket. Vi bruker musebegivenheter for å bestemme funksjonaliteten vi ønsker å opprette.
De "Mouseenter" hendelsen bryr seg når musemarkøren går inn i en hvilken som helst del av elementet som er aktuelt, som i dette tilfellet er
"en" eller lenkeelement, vil dette bare fungere når linken har mer enn null tegn i tittelattributtet. Her må vi gjøre følgende:
Accentsconagua
$ ("a"). mouseenter (funksjon (e) // event avbrutt når musemarkøren går inn i "a" element var $ class_name = $ (dette) .attr ("klasse"). klasseattributt av "a" -element etter å ha forlatt 13 tegn som er lik "tooltip_link" var $ x = e.pageX - this.offsetLeft; // få musekoordinat i forhold til "a" element var $ tooltip_text = $ (dette) .attr ("title"); // få tittelattributt av "a" -element hvis ($ tooltip_text.length> 0) // vise verktøytip bare hvis det har mer enn null tegn $ (dette) .append'+ $ tooltip_text +''); // legg til verktøytipsmarkering, sett inn klassenavn og verktøytip-tittel fra verdiene over $ ("a> div.tooltip.center"). css ("left", "" + $ x - 103 + "px"); // sett verktøytipsposisjon fra venstre $ ("a> div.tooltip.left"). css ("left", "" + $ x + "px"); // sett verktøytipsposisjon fra venstre $ ("a> div.tooltip.right"). css ("left", "" + $ x - 208 + "px"); // sett verktøytipsposisjon fra venstre $ ("a> div.tooltip." + $ class_name) .fadeIn (300); // vise, animere og fade i verktøylippen); De "Mouseleave" Hendelsen brenner når musemarkøren forlater
"en" eller lenkeelement. I denne egenskapen vil vi ganske enkelt reversere alt vi har gjort i
"Mouseenter" begivenhet. Vi vil få klassenavnet attributtdelen fra koblingen, så vi vil forsvinne verktøytipset som vil sette displayegenskapen til
"ingen" og bruk animasjonsvarighet på 300ms, da må vi forsinke de neste funksjonene for
300ms til fade ut animasjonen er avsluttet. Nå for å fjerne verktøytipsmarkeringen må vi sette den inn i en egendefinert kø, og da må vi avslutte køen vår ved å bruke
"Dequeue" funksjon som gjør at hovedkøen kan fortsette.
$ ("a"). mouseleave (funksjon () // event avbrutt når musemarkøren forlater "et" element var $ class_name = $ (dette) .attr ("klasse"). attributt av "a" -element etter å ha forlatt 13 tegn som er lik «tooltip_link» // fade ut verktøytipset, forsink for 300ms, og fjern deretter verktøytipset og avslutt tilpasset køen $ ("a> div.tooltip." + $ class_name ) .fadeOut (300) .delay (300) .queue (funksjon () $ (dette) .remove (); $ (dette) .dequeue ();;;); Nå skal ditt endelige resultat se ut som bildet nedenfor. For sluttresultatet ditt å se akkurat som vår demo, bør du bruke stilene på innsiden
"Tut.css", men vær så snill å legge til dine egne justeringer.
Jeg håper at du alle har lært noen teknikker fra vår CSS og JQuery opplæring! Del dine tanker nedenfor :)
