Share
Verktygstips är relativt enkla att genomföra genom att bara lägga till lite markup på din HTML och använda lite CSS. Men om du aldrig har hört talas om HTML5-dataattribut, kan du kolla in det här alternativet (och mycket renare).
Om du har följt Admin Bar-serien, bör den här skärmen avsluta sakerna snyggt. Om du har inte följt med, oroa dig inte; den här screencasten lär dig något du kan använda i alla slags situationer. Vi ska titta på ett par alternativ för att få våra verktygstips igång.
Om du av någon galen anledning inte vill titta på mig, visa saker, nedan är ett par snippets att ta bort och leka med. Obs! Det här är förenklade exempel - du kanske vill lägga till webbläsarprefix och extra styling etc.
Det första exemplet använder ytterligare markering i form av a inom vårt ankar. Det fungerar bra, låter oss lägga till en dekorativ "punkt" till vårt verktygstips och är för närvarande det säkrare alternativet där webbläsarkompatibilitet berörs.
HTML:
Accentsconagua
Detta är länkendet här är tipset! CSS:
a.tooltip span font-size: 10px; position: absolute; z-index: 999; white-space: nowrap; botten: 9999px; vänster: 50%; Bakgrund: # 000; color: # e0e0e0; vaddering: 0px 7px; linjehöjd: 24px; höjd: 24px; opacitet: 0; övergång: opacitet 0,4s lätthet; a.tooltip span :: före content: ""; display: block; gränsen-vänster: 6px solid # 000000; border-top: 6px solid transparent; position: absolut; topp: -6px; vänster: 0px; a.tooltip: svängspänning opacitet: 1; botten: -35px;
Här är det exempel som rensar upp vår markering, använder HTML5 dataattribut för att hålla värdet av vårt verktygstips och css ::innan pseudo-element för att visa det. Mycket snyggare.
HTML:
Detta är länken
CSS:
a.tooltip :: före innehåll: attr (data-tip); typsnittstorlek: 10px; position: absolute; z-index: 999; white-space: nowrap; botten: 9999px; vänster: 50%; Bakgrund: # 000; color: # e0e0e0; vaddering: 0px 7px; linjehöjd: 24px; höjd: 24px; opacitet: 0; övergång: opacitet 0,4s lätthet; a.tooltip: svävar :: före opacity: 1; botten: -35px;
