Från författaren: Hallå. Ett verktygstips är en liten förklarande text som visas när du håller muspekaren över ett element, vanligtvis en bild. Idag ska vi titta på hur du kan göra ett verktygstips i HTML på olika sätt.

Standardtips

Som standard är title-attributet ansvarigt för att visa förklarande text. Den kan användas för olika element, men används vanligtvis bara för bilder för att förklara vad de visar.

I en av de tidigare artiklarna använde jag en bild av en tiger för att visa hur man arbetar med bildstorlekar. Om du inte har något emot det så använder jag den här bilden igen. Så för att visa en ledtråd behöver du bara lägga till titelattributet och skriva önskad text i den.

< img src = "tiger.jpg" title = "Det här är en tiger" >

Det kan vara antingen ett ord eller flera meningar. Och så här ser det ut:

Tipset visas smidigt, inte omedelbart efter att ha svävat, utan efter en tid. Detta är standardbeteendet.

Det största problemet med ett sådant verktygstips är att det inte kan stiliseras. Hur man bestämmer sig det här problemet? Vi måste ge en hint på andra sätt. Nu ska jag visa dig ett par.

Ren css-metod

Ett mycket intressant sätt som låter dig vackert visa en ledtråd för en bild. HTML-uppmärkningen är enkel, bara bilden behöver inneslutas i en blockbehållare, till vilken vi kommer att tilldela en identifierare så att vi senare kan referera till den i stilar:

< div id = "tiger" data - name = "Sumatran tiger"> < img src = "tiger.jpg" > < / div >

Det enda som kan vara oklart för dig här är attributet data-name. Grejen är att detta är ett så kallat dataattribut som inte gör någonting på egen hand, men dess värde kan användas i css och javascript, vilket gör det användbart i vissa fall. Du kommer att se detta härnäst.

Så låt oss först beskriva stilarna för behållaren. Vi behöver relativ positionering eftersom vi absolut kommer att placera blocket med förklarande text så att positioneringen sker relativt det överordnade blocket, och inte hela sidan.

#tiger( position: relativ; display: inline-block; )

#tiger( position: relativ; display: inline - block;

Blocklinjevisning kommer att förhindra blocket (och med det blocket med verktygstipset som vi kommer att skapa) från att sträcka sig över hela fönstrets bredd. Allt som återstår är att skapa tipset själv. I CSS är det mycket bekvämt att göra detta med hjälp av pseudo-element. Så här:

#tiger:hover:efter ( innehåll: attr(datanamn); position: absolut; vänster: 0; botten: 0; bakgrund: rgba(5,13,156,.55); färg: #fff; text-align: center ; font-family: cursive font-size: 14px width: 100% ;

#tiger:hover:efter ( innehåll: attr (data - namn); position: absolut; vänster: 0; botten: 0; bakgrund: rgba(5, 13, 156, . 55); färg: #fff; text-align: center; font - family : cursive ; teckenstorlek: 14px; stoppning: 3px 0; bredd: 100%;

Det finns mycket kod, men det är inget komplicerat här. #tiger:hover:after-väljaren betyder följande: när vi håller muspekaren över ett block med en bild måste vi skapa ett efter-pseudo-element (och då listas reglerna med hängslen). Egenskapen content: attr(data-name) specificerar textvärde blockera. Det kommer att vara lika med vad som är skrivet i data-name-attributet för bildomslagsblocket.

Det här verktygstipset dyker upp när du håller muspekaren över bilden, men till skillnad från standarden gör den detta abrupt, och själva utseendet inträffar direkt i ögonblicket för hovring. Smidigt utseende i I detta fall Implementeringen kommer inte att fungera eftersom mjuka övergångar inte stöds för pseudoelement.

Metod 2. Ren css och smidigt utseende

Men genom att skriva om koden en hel del kan du få ett smidigt utseende av verktygstipset, och återigen utan att använda javascript.

För att själv se de två effekterna som jag kommer att visa dig härnäst rekommenderar jag att du öppnar Anteckningar eller någon annan praktisk kodredigerare och upprepar allt efter mig. Sant, för detta måste du fortfarande inkludera en stilfil, även om stilar också kan skrivas i html i taggar

Verktygstipsinnehåll tas bort från visningen genom att använda en negativ marginal-vänster-egenskap istället för att visa: ingen eller synlighet: dold eftersom vissa skärmläsare ignorerar dessa egenskaper.

CSS-stilar för verktygstips

Vi kommer snart att få verktygstips för att fungera på samma sätt olika webbläsare. Låt oss nu lägga till några rader med CSS-kod.

Genom att lägga till följande kodbit kommer vi att visa verktygstips på skärmen, även om de kommer att se banala ut och kommer att vara svåra att visuellt separera från resten av texten.

CSS för att visa verktygstips

.tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolut; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; ) . tooltip:hover img ( kantlinje: 0; marginal: -10px 0 0 -55px; float: vänster; position: absolut; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif; font-size : 1,2em; *html a:hover (bakgrund: transparent;)

Behov av *html-sträng

Du kanske undrar varför den sista raden i ovanstående kod ingår? Det ställer in transparensen för bakgrunden till länken. När jag testade verktygstips upptäckte jag en konstig effekt i IE6 som inte gick att ta bort så länge länkbakgrunden fanns!

Ovanstående kod säkerställer funktionaliteten hos verktygstips. De visas på skärmen, men de är ganska svåra att skilja från den allmänna texten. Det finns inga färgscheman som gör att verktygstipstexten sticker ut på sidan.

Ställ in färgschemat för verktygstips/

Följande kod anger ett färgschema för var och en av de fem verktygstipsstilarna.

Efter att ha ändrat sidkoden och uppdaterat den i webbläsaren kommer verktygstips att dyka upp när du håller muspekaren över länken nästan likadant i alla webbläsare.

CSS-kod för färgschema

.classic ( bakgrund: #FFFFAA; border: 1px solid #FFAD33; ) .critical ( bakgrund: #FFCCAA; border: 1px solid #FF3334; ) .help ( bakgrund: #9FDAEE; border: 1px solid #2BB0D7; ) .info ( bakgrund: #9FDAEE; kant: 1px fast #2BB0D7; ) .varning ( bakgrund: #FFFFAA; kant: 1px fast #FFAD33; )

CSS-koden är väldigt enkel, men den ger verktygstips ett fantastiskt utseende och gör sitt jobb överallt. Färgschemat kan ändras efter eget gottfinnande.

Några touch av CSS3 för avancerad visning av verktygstips

Innan vi avslutar den här handledningen lägger vi till några rader med CSS3-kod för att lägga till visuella effekter till våra verktygstips. Låt oss ställa in rundade hörn med egenskapen border-radius och lägga till en dimension med egenskapen box-shadow.

Eftersom ingen av dessa egenskaper stöds globalt, kommer de bara att fungera i några av de senaste webbläsarversionerna. Men där de fungerar kommer verktygstipsen att se snygga och sexiga ut!

Låt oss lägga till koden nedan i selector.tooltip:hover span och uppdatera sidan.

Visuella effekter för kant, skugga och transparens lyfter verktygstipset ovanför sidtexten och gör informationen kontrasterande och lättläst.

Du kanske märker att inte bara officiella används CSS-egenskaper 3, men även tillägg för Mozilla och WebKit.

Ytterligare CSS-egenskaper för nya webbläsare

kantradie: 5px 5px; -moz-border-radie: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Sammanfattning

Denna handledning visar att det inte kräver mycket ansträngning att förbättra gränssnittet. Dessutom är det värt att ompröva upplevelsen använder CSS, vilket kan vara användbart för att ställa in en ny nivå av interaktivitet för en webbapplikation.