Het maken van een tooltip voor een website is een manier voor web-ontwikkelaars om extra informatie toe te voegen aan een webpagina , zoals informatie waar een link die u of informatie een tekstveld vereist zal nemen . Tooltips zijn een manier om een nota verlaten aan de gebruiker wanneer ze de muis over een afbeelding of tekst . Doordacht tooltips zijn subtiel en helpen om de ervaring van de gebruiker te verbeteren . Tooltips zijn gemakkelijk om direct naar de HTML -code via CSS toe te voegen . Instructies
1 Voeg de CSS-code in de header sectie en onder de title tag van het HTML-bestand .
2 < style type = " text /css " > tip { border - bottom : 0px gestippelde # 000000 ; color: # 000000 ; outline : none ; cursor : pointer ; text - decoration : none ; position: relative ; } . . tip overspanning { margin -left : - 999em ; position: absolute ; } tip : . hover overspanning { 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 ; links : 1em ; top : 2em ; z - index : 99 ; margin -left : 0 ; breedte : . 250px ; } gebruikelijke { padding : 0.8em 1em ; } . gebruikelijke { background : # FFFFFF ; border : 1px solid # FFAD33 ; } < /style > < /head >
3 Plaats de volgende HTML code onder < /head > voor een monster van de tooltip .
4 Voorbeelden van CSS ToolTips ! < /h1 > Voorbeelden van een < a class = " tip " href = " # " > Tooltip Tooltips worden gebruikt om zorgvuldig doordacht informatie toe te voegen aan de ervaring van de gebruiker te verbeteren . < /span > < /a > < /body > < /html >
5 Om de tooltip te zien , het HTML-bestand te openen in een webbrowser en houd de muis over de onderstreepte tooltip woord .
6 Pas de code als nodig is , bijvoorbeeld de tekst veranderen decoratie te onderstrepen of de achtergrondkleur # FFFFAA voor een gele .
< br > |
