Göra ett verktygstips för en webbplats är ett sätt för webbutvecklare att lägga till ytterligare information till en webbsida till exempel information om en länk tar dig eller upplysningar ett textfält kräver . Verktygstips är ett sätt att lämna ett meddelande till användaren när de muspekaren över en bild eller text . Noga genomtänkt verktygstips är subtila och bidra till att förbättra användarens upplevelse . Verktygstips är lätta att lägga direkt till HTML-koden genom CSS. Instruktioner
1
Lägg CSS -kod i huvudet avsnittet och under titeln taggen på HTML-filen .
2
< stil type = " text /css " > tip { border - bottom : 0px dotted # 000000 ; color : # 000000 ; kontur : none; markör : pointer ; text - decoration : none; ställning : relativa ;} . . tip span { margin-left : - 999em ; position: absolute ; } tips : . hover span { border - radius : 15px 15px ; box - shadow : 13px 13px 13px RGBA ( 0 , 0 , 0 , 0.1 ) , font -family : Georgia , " , Times New Roman " , Times , serif , position: absolute ; vänster : 1em , top : 2em , z - index : 99 , margin-left : 0; bredd : . 250px ; } vanligt { padding : 0.8em 1em ; } . vanligt {background : # FFFFFF ; border : 1px solid # FFAD33 ;} < /style > < /head > Addera 3
Infoga följande HTML kod under < /head > för ett prov av verktygstips .
4
Exempel på CSS ToolTips ! < /h1 >
Exempel på en < a class = " tip " href = " # " > Tooltip Verktygstips används för att lägga genomtänkt information för att förbättra användarens upplevelse . < /span > < /a > < /body> < /html >
5 att se verktygstips , öppna HTML-filen i en webbläsare och håll musen över understrukna tooltip ord .
6
Justera koden som behövs , till exempel ändra texten dekoration att understryka eller bakgrundsfärgen # FFFFAA för en gul .