Hvordan lage en enkel CSS3 Tooltip

Verktøytips er en flott måte å vise brukeren mer informasjon ved å bare sveve over et bilde eller en tekst. De kan for eksempel brukes til å gi bildetekster for bilder, eller lengre beskrivelser for koblinger, eller annen nyttig informasjon som vil forbedre brukeropplevelsen av nettstedet ditt uten å trenge inn på design.

I dag skal jeg vise deg hvordan du lager et enkelt verktøytips ved hjelp av HTML og CSS for å vise titteletiketten til dine hyperkoblinger.

La oss starte med å opprette noen enkle oppslag for koblingen. Vi må gi den en tittel som vil være verktøytipsinnholdet, og tildele det en klasse:

CSS3 Tooltip

Det neste trinnet er å skape litt rudimentær styling for vår tooltip-klasse:

.tooltip{display: inline;position: relative;}

Vi viser nå vårt verktøytips inline med vår lenke ved hjelp av relativ posisjonering. Deretter ønsker vi å lage en avrundet boks for å danne verktøytipsets kropp, og plassere den slik at den flyter over lenken:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Vi bruker: sveivervelgeren som velger et element, i dette tilfellet vår lenke, på mouseover og: after selector, som legger inn innhold etter det valgte elementet. Vi har angitt en svart bakgrunn med 80% opacity, og for nettlesere som ikke støtter RGBA farger har vi gitt en mørkegrå bakgrunn.

Litt avrundede hjørner er opprettet ved å bruke grense-radiusattributtet, og vi har satt tekstfargen til hvit. Til slutt har vi plassert verktøytipsboksen til venstre for linken og lagt til en liten polstring.

I tillegg til styling og posisjonering har vi satt innholdsegenskapen:

content: attr(title);

Denne egenskapen tillater oss å sette inn innholdet vi ønsker som kan være en streng, en mediefil eller et attributt av elementet. I dette tilfellet bruker vi tittelattributtet til lenken.

Nå når du svinger over lenken din, bør et verktøytips vises over det med teksten du angir som koblingstittel. Vi har et problem, men tittelinformasjonen blir vist to ganger: en gang i verktøytipset og en gang i nettleseren. For å fikse dette må vi gjøre en liten endring i HTML-en vår:

CSS3 Tooltip 

Det vi har gjort her er å pakke inn linkteksten i en span-kode med egen tittelattributt. Nå viser nettleseren tittelen som er angitt i span-merket når koblingen er svevet over.

For å fullføre vil vi legge til en pil til bunnen av verktøytipset, for å gi den den lille ekstra berøringen av stilen. Vi gjør dette ved å bruke: før valg og noen grenseformater:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Vi bruker noen grensehakker her for å skape effekten av en pil: Angi kantlinjene til venstre og høyre for å gjennomsiktige og kontrollere kantbredder. Vi har også plassert pilen slik at den sitter på bunnen av verktøylinjen.

Og der har du det, et simpelt verktøytips med titteltaket på elementet svinget over. Du kan også bruke dette til bilde alt-tagger, eller til og med bare legg inn din egen tekst i CSS for å dukke opp der du vil.

Du kan se en jobber demo her .

Hvordan bygger du verktøytips? Har du brukt denne teknikken på et nettsted? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, hint bilde via Shutterstock.