Realiseringen af et værktøjstip for et websted er en måde for web-udviklere at tilføje yderligere oplysninger til en webside såsom information , hvor et link vil tage dig eller information et tekstfelt kræver . Tooltips er en måde at forlade en note til brugeren, når de musen over et billede eller tekst . Gennemtænkt tooltips er subtile og bidrage til at forbedre brugerens oplevelse. Tooltips er nemt at tilføje direkte til HTML-koden via CSS. Instruktioner
1
Føj CSS kode i header sektionen og under titlen tag i HTML-filen .
2
< style type = "text /css "> tip {border -bottom: 0px punkteret # 000000 , color: # 000000 ; omrids : ingen; cursor : pointer , tekst- dekoration: ingen; position : relative ;} . . tip span { margin - venstre : - 999em , position: absolute ;} tip: . hover span { border- radius: 15px 15px ; box -shadow : 13px 13px 13px RGBA (0 , 0, 0 , 0,1 ) , font- family: Georgien, " , Times New Roman " , Times , serif ; position : absolute; venstre : 1em ; top: 2em , z- index: 99 ; margin venstre: 0 , bredde: . 250px ;} sædvanlige { padding: 0.8em 1em ;} . sædvanlig {background : # FFFFFF ; kant: 1px solid # FFAD33 ;}
3
Indsæt det følgende HTML- kode under for en prøve af tooltip .
4
Eksempler på CSS værktøjstip !
Eksempler på Tooltip Tooltips bruges til at tilføje nøje gennemtænkt oplysninger til at forbedre brugerens oplevelse. < /html >
5
For at se tooltip , åbner HTML- filen i en webbrowser og hold musen over den understregede tooltip ord.
6
Juster koden efter behov, for eksempel ændre tekstens dekoration til at understrege eller baggrundsfarven # FFFFAA for en gul .
< br >