Share
Vi har nyligen lagt fram en handledning om hur man skapar manusfria CSS3-verktygstips? Idag lägger vi in en skriptförstärkt version som är SEO-vänlig och använde en liten jQuery-magi för att göra det animerat till muspositionen!
Verktygstips används för att visa extra information när en länk är svävad. När vi skapar länkar på vår hemsida är det alltid en bra praxis att lägga till titlar till länkarna till fördel för SEO. Dessa titlar visas när du svävar över en länk men det saknar märkning eller anpassad styling. I denna handledning guidar jag dig genom processen med:
På det här sättet kommer vi att förbättra användarupplevelsen och samtidigt hålla allt gott och rent för sökmotorer och SEO-fördelar.
Låt oss först börja med att lägga till markeringen inuti huvud av vårt dokument. Vi lade till två stilark:
"Style.css" och "Tooltips.css". Du kan ta bort den senare när du vill genomföra ditt eget arbete, men vi använder det i demo. Stilarket
"Style.css" innehåller alla CSS-format som formaterar våra verktygstips. Vi har också lagt till JQuery Javascript-bibliotekets referens. Nu är här vårt huvudnamn för dokumenthuvudet.
Länkverktygstips med CSS3 och JQuery
Nu måste vi lägga till markeringen för länkarna med verktygstips. I mitt sätt att göra länkar för att visa verktygstips måste vi lägga till en länk med klassattribut
"Tooltip_link". Detta kommer att ställa in de grundläggande verktygstipsen och vi lägger till ett extra klassnamn på antingen
"vänster", "Centrum" eller "höger" för att ange positionen för verktygstipspilen inriktad till nedre vänster, mitten eller höger respektive. Slutligen lägger vi till några titlar till länkarna som ska visas. Nu är här länkarna.
Verktygstips vänster Verktygstipscentrum Verktygstips rätt
Nu måste vi bestämma hur verktygetipsmarkeringen kommer att vara så att vi kan basera våra stilar och kodning utifrån den. Vi kommer att använda en grundläggande
"Div" tagg med klassattribut av "Verktygstips" och ett av dessa klassnamn
"vänster", "Centrum" eller "höger". Inuti den kommer vi att placera texten på verktygstipset. Nu är här verktygetipsmarkeringen.
Några verktygstips text
Först börjar vi genom att ställa in länken själv genom att ställa in sin position till "släkting" så vi kan placera verktygstipset i förhållande till länken.
a.tooltip_link position: relative! important;
Nu måste vi lägga till CSS-stilen för det grundläggande verktygstipset som vi ska använda klassnamnet
"Verktygstips". Vi måste gömma verktygstipset så att det kan visas med JQuery när länken är svävad, ställ in positionen till
"absolut" så vi kan ställa in positionen i förhållande till själva länken, sätt bredden till
200px, en 5px vaddering, en bottenmarginal på
12px För att skapa ett utrymme för pilen, sätt textfärgen till vit, z-index till
100 att vara på toppen av allt innehåll, 100% från botten, sätt bakgrundsfärg till
transparent blå färg med vissa typsnitt och textstilar.
Tänk på att du kan ändra stilen till vad som helst du vill, demo kommer att använda avsiktligt enkla visuella stilar för enkelhetens skull.
.verktygstips display: none; position: absolut! viktigt; bredd: 200px; bakgrund: rgba (61,102,143,0,9); vaddering: 5px; marginal: 0 0 12px 0; färg: #fff; z-index: 100; botten: 100%; text-align: center; font-weight: bold; typsnittstorlek: 11px;
Låt oss lägga till den allmänna stilen för verktygspilen genom att använda puesdo-element
"efter" och "innan". Vi utformar "efter" puesdo-element som bildar pilens fulla pil till vänster och höger och hälften av pilen i mittverktygstipset genom att ställa in det för att inte ha något innehåll, absolut position, ställa in kantfärg på samma sätt som vi använde för verktygstipsbakgrunden med full bredd och
"-14px" från botten av verktygstipset. De "innan" puesdo element har nästan samma stil som
"efter" puesdo element.
.verktygstips: efter innehåll: ""; position: absolut! viktigt; botten: -14px; z-index: 100; gräns: 0 fast rgba (61,102,143,0,9); gränsbotten: 14px solid transparent; bredd: 100%; .tooltip: före innehåll: ""; position: absolut! viktigt; gräns: 0 fast rgba (61,102,143,0,9); botten: -14px; z-index: 100;
Att stifta verktygstipset med vänsterpil använder vi "vänster" klass vi utformar klassen med en gränsradio från alla hörn förutom den längst ned till vänster, så stämmer vi den vänstra gränsen och läget från längst till vänster för "efter" puesdo-elementet. För högerpilen ändrar vi bara gränsen och anger den högra gränsen och placerar den från höger. Mittenpilverktygetipset kommer vi att ställa in kantradie i alla hörn, nu måste vi ställa in båda
"efter" och "innan" puesdo-element. De
"efter" puesdo element har en vänstra gränsen med 50% av bredden och
50% från vänster, den "innan" puesdo element har en höger gräns och transparent bottengräns, med
50% av bredden och 50% från höger sida.
.tooltip.left border-radius: 5px 5px 5px 0; .tooltip.left: efter border-left-width: 14px; vänster: 0; .tooltip.right border-radius: 5px 5px 0 5px; .tooltip.right: efter border-right-width: 14px; höger: 0; .tooltip.center border-radius: 5px; .tooltip.center: efter border-left-width: 10px; bredd: 50%; vänster: 50%; .tooltip.center: före border-right-width: 10px; gränsbotten: 14px solid transparent; bredd: 50%; rätt: 50%;
För att få den önskade funktionaliteten måste vi lägga till vår JQuery-kod innanför en skriptikett före den slutgiltiga koden. Vi använder mushändelser för att bestämma vilken funktionalitet vi vill skapa.
De "Mouseenter" händelse brinner när muspekaren kommer in i någon del av elementet i fråga som i detta fall är det
"en" eller länkelementet, kommer detta bara att fungera när länken har mer än nolltecken i titelattributet. Här behöver vi göra följande:
Accentsconagua
$ ("a"). musenter (funktion (e) // händelse avfyrade när muspekaren går in i "a" element var $ class_name = $ (detta) .attr ("class"). klass attribut av "a" -element efter att ha lämnat 13 tecken som är lika med "tooltip_link" var $ x = e.pageX - this.offsetLeft; // få mus X-koordinat i förhållande till "a" element var $ tooltip_text = $ (detta) .attr ("title"); // få titelattribut av "a" -element om ($ tooltip_text.length> 0) // visa verktygstips bara om det har mer än nolltecken $ (detta) .append'+ $ tooltip_text +''); // lägg till verktygstipsmarkering, sätt in klassnamn och verktygstitelnamn från värdena över $ ("a> div.tooltip.center"). css ("vänster", "" + $ x - 103 + "px"); // Ange verktygstipsposition från vänster $ ("a> div.tooltip.left"). css ("left", "" + $ x + "px"); // Ange verktygstipsposition från vänster $ ("a> div.tooltip.right"). css ("left", "" + $ x - 208 + "px"); // Ange verktygstipsposition från vänster $ ("a> div.tooltip." + $ class_name) .fadeIn (300); // visa, animera och blekna i verktygstipset); De "Mouseleave" händelse brinner när muspekaren lämnar den
"en" eller länkelement. I detta attribut kommer vi helt enkelt att vända om allt vi har gjort i
"Mouseenter" händelse. Vi kommer att få klassnamnet attribut del från länken, då vi kommer att blekna ut verktygetipset som kommer att ställa in visningsegenskapen till
"ingen" och använd animationsvaraktighet för 300 ms, då måste vi fördröja de följande funktionerna för
300 ms tills blekna animationen är slut. Nu för att ta bort verktygetipsmarkeringen måste vi sätta det in i en anpassad kö och då måste vi avsluta vår kö genom att använda
"Dequeue" funktion som tillåter huvudkön att fortsätta.
$ ("a"). mouseleave (funktion () // händelse avbruten när muspekaren lämnar "a" element var $ class_name = $ (detta) .attr ("class"). attribut av "a" -element efter att ha lämnat 13 tecken som är lika med "tooltip_link" // fade ut verktygstipset, fördröja i 300ms och ta bort verktygstipset och avsluta anpassad kö $ ("a> div.tooltip." + $ class_name ) .fadeOut (300) .delay (300) .queue (funktion () $ (detta) .remove (); $ (detta) .dequeue (););); Nu ska ditt slutresultat se ut som bilden nedan. För att ditt slutresultat ska se ut precis som vår demo ska du använda stilarna inuti
"Tut.css", men gärna lägga till egna justeringar.
Jag hoppas att du har lärt dig några tekniker från vår CSS och JQuery handledning! Dela dina tankar nedan :)
