Sådan oprettes en enkel CSS3 Tooltip

Værktøjstip er en fantastisk måde at vise din bruger mere information ved blot at svæve over et billede eller en tekst. De kan f.eks. Bruges til at give billedtekster til billeder eller længere beskrivelser for links eller andre nyttige oplysninger, der vil forbedre brugeroplevelsen af ​​dit websted uden at gå ind på designet.

I dag vil jeg vise dig, hvordan du opretter et simpelt værktøjstip ved hjælp af HTML og CSS for at vise titellinket på dine hyperlinks.

Lad os starte med at oprette en simpel markering for linket. Vi skal give det en titel, som vil være værktøjstipindholdet og tildele det en klasse:

CSS3 Tooltip

Det næste skridt er at skabe nogle rudimentære styling til vores tooltip klasse:

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

Vi viser nu vores værktøjstip inline med vores link ved hjælp af relativ positionering. Dernæst vil vi oprette en afrundet boks for at danne værktøjstipens krop og placere den så, at den flyder over linket:

.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 bruger: svejsevælgeren, som vælger et element, i dette tilfælde vores link, på mouseover og: after selector, som indsætter indhold efter det valgte element. Vi har angivet en sort baggrund med 80% opacitet, og for browsere, der ikke understøtter RGBA-farver, har vi givet en mørkegrå baggrund.

Lidt afrundede hjørner er oprettet ved at bruge grænsen radius attributten, og vi har indstillet tekstfarven til hvid. Endelig har vi placeret værktøjstipboksen fra venstre af linket og tilføjet lidt polstring.

I tillæg til styling og positionering har vi indstillet indholdsegenskaben:

content: attr(title);

Denne egenskab tillader os at indsætte det indhold, vi ønsker, som kan være en streng, en mediefil eller en attribut af elementet. I dette tilfælde bruger vi titelattributtet til linket.

Nu, når du svæver over dit link, skal et værktøjstip vises oven over det med den tekst, du angiver som din linktitel. Vi har dog et problem, men titeloplysningerne bliver vist to gange: en gang i værktøjstip og en gang i browseren. For at løse dette skal vi lave en lille ændring i vores HTML:

CSS3 Tooltip 

Hvad vi har gjort her er, at pakke linkteksten i et spændingsnummer med egen titelattribut. Nu vil browseren vise titlen i spændingsetiketten, når linket er svævet over.

For at afslutte vil vi tilføje en pil til bunden af ​​værktøjstipen for at give den det lille ekstra touch af stil. Det gør vi ved at bruge: før vælgeren og nogle grænsestiler:

.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 bruger et par grænsehakker her for at skabe effekten af ​​en pil: Indstilling af grænselimerne til venstre og højre til gennemsigtig og styring af kantbredder. Vi har også placeret pilen, så den sidder nederst på værktøjstipboksen.

Og der har du det, et simpelt værktøjstip med elementets titelmærke svævet over. Du kan også bruge dette til billed alt tags, eller endda bare læg din egen tekst i CSS for at dukke op, hvor du vil.

Du kan se en arbejder demo her .

Hvordan opbygger du værktøjstips? Har du brugt denne teknik på et websted? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, hint billede via Shutterstock.