Så här skapar du en enkel CSS3 Tooltip

Verktygstips är ett bra sätt att visa användaren mer information genom att helt enkelt sväva över en bild eller text. De kan till exempel användas för att ge bildtexter för bilder eller längre beskrivningar för länkar eller annan användbar information som skulle förbättra användarupplevelsen på din webbplats utan att påverka utformningen.

Idag ska jag visa dig hur man skapar ett enkelt verktygstips med HTML och CSS för att visa titellabeln för dina hyperlänkar.

Låt oss börja med att skapa en viss enkel markering för länken. Vi måste ge den en titel som kommer att vara verktygsinnehållet och tilldela det en klass:

CSS3 Tooltip

Nästa steg är att skapa lite rudimentär styling för vår tooltip-klass:

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

Vi visar nu vårt verktygstips inline med vår länk med hjälp av relativ positionering. Därefter vill vi skapa en rundad låda för att bilda verktygstipsens kropp och placera den så att den flyter över länken:

.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 använder: svängväljaren som väljer ett element, i detta fall vår länk, på mouseover och: efter väljaren, som sätter in innehåll efter det valda elementet. Vi har angivit en svart bakgrund med 80% opacitet, och för webbläsare som inte stöder RGBA-färger har vi gett en mörkgrå bakgrund.

Svagt avrundade hörn skapas med hjälp av gränsradieattributet och vi har satt textfärgen till vit. Slutligen har vi placerat verktygslådan från vänster om länken och lagt till lite polstring.

Förutom stilering och positionering har vi satt innehållsegenskapen:

content: attr(title);

Den här egenskapen låter oss infoga det innehåll vi vill ha som kan vara en sträng, en mediefil eller ett attribut av elementet. I det här fallet använder vi länkens titelattribut.

Nu när du svävar över din länk bör en verktygstips visas ovanför den med texten du anger som din länktitel. Vi har ett problem men titelinformationen visas två gånger: en gång i verktygstipset och en gång av webbläsaren. För att åtgärda detta måste vi göra en liten ändring i vår HTML:

CSS3 Tooltip 

Vad vi har gjort här är att pakka in länktexten i en span-tagg med egen titelattribut. Nu kommer webbläsaren att visa titeln som anges i span-taggen när länken svängs över.

För att avsluta lägger vi till en pil till botten av verktygstipset, för att ge den den lite extra touchen av stilen. Vi gör detta genom att använda: före väljare och vissa gränsstilar:

.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 använder några gränshackar här för att skapa effekten av en pil: Ställ in kantfärgerna till vänster och höger för att öppna och kontrollera gränsviddarna. Vi har också placerat pilen så att den sitter längst ner i verktygsbehållaren.

Och där har du det, ett enkelt verktygstips med titeln på elementet svängde över. Du kan också använda detta för bild alt-taggar, eller till och med bara placera din egen text i CSS för att dyka upp där du vill.

Du kan se en arbetar demo här .

Hur bygger du verktygstips? Har du använt den här tekniken på en webbplats? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, hintbild via Shutterstock.