Yderligere oplysninger på websteder ofteplaceret i form af svæveværktøjstip, for eksempel for at dechifrere komplekse forkortelser eller afklare brugerhandlinger. Denne interface-løsning kaldes et værktøjstip. Det sparer plads på siden ved kun at vise grundlæggende data, men giver læseren mulighed for at gennemgå tilføjelser efter behov. Ud over den rent informationsfunktion kan værktøjstip være vigtige designelementer, der understreger den overordnede stil på webstedet og tiltrækker opmærksomhed.
Elementet, hvis interaktion forårsager værktøjstipens udseende, kaldes mål.
Pop-up-blokke indeholder normalt vigtige,men ikke grundlæggende oplysninger. Det antages, at brugeren kun skal læse det, hvis han vil. For ikke at irritere, forstyrre eller distrahere fra hovedindholdet skal et tip opfylde en række krav:
Evnen til at oprette tip er iboende i hypertekst-markupsproget på websider. Oprindeligt var det meningen at dechifrere forkortelser og komplekse videnskabelige udtryk.
For at oprette en sådan popup-blok skal du bruge en titelattribut, der er tilgængelig for ethvert HTML-tag.
<p> Proxima Centauri ligger ca.4.22 <i title = "9 460 730 472580 800 meter"> lysår </i> fra Jorden, hvilket er 270 tusind gange mere end afstanden fra Jorden til Solen. </p> <img title = "Neuschwanstein Castle" src = "/ images / disney.jpg">
De vigtigste fordele ved HTML-værktøjstip er: brugervenlighed og evnen til at bruge med alle layoutelementer - fra tekst til billeder. Men hun har også store ulemper:
HTML-titelattributten er kun egnet til små tip, der ikke kræver særlig styling. I andre tilfælde er det nyttigt at vide, hvordan man laver værktøjstip ved hjælp af CSS.
Du kan oprette en smuk brugerdefineret tipblok ved hjælp af kaskadestilark. Det bruger grundlæggende CSS-koncepter:
Skærm;: svæver, som er tildelt ethvert element under musemarkøren;: Før og : efterder kan bruges til enkle meddelelser for ikke at oprette et separat HTML-element;Alle disse egenskaber understøttes godt af moderne browsere, hvilket gør værktøjstipmekanismen pålidelig.
Pseudoklasse : svæverudover at svæve markøren, reagerer det også på et tryk på en finger på berøringsskærmen, hvilket muliggør understøttelse af mobile gadgets.
Et CSS-værktøjstip kan enten være en separat HTML-blok med sin egen struktur eller et pseudo-element i en anden blok. Hver af disse muligheder har sine egne fordele og ulemper at overveje.
Det er meget lettere at manipulere indhold i en separat beholder. Du kan placere billeder, overskrifter og andre elementer i den.
Pseudo-elementet giver dig mulighed for at slippe af med unødvendigeblokke og gøre layoutet lettere. Tekstindhold kan placeres i attributten for målelementet og ikke behøver at bekymre sig om at oprette selve værktøjstip, alt sker ved CSS. Imidlertid er et pseudo-element dårligt egnet til en kompleks blok. Det kan også kun oprettes til lukning af tags. Du kan ikke vedhæfte et sådant tip direkte til billedet.
Lad os skabe et pænt designet værktøjstip med en kompleks struktur til den nærmeste stjerne fra stjernebilledet Centaurus.
Lad os først definere HTML-markeringen:
<h2> Stjernebilledet i stjernebilledet Centaurus </h2> <ulclass = "stars"> <li class = "star"> Alpha Centauri </li> <li class = "star"> Beta Centauri </li> <li class = "star"> Theta Centauri </li> <li class = "star"> Gamma Centauri </li> <li class = "star"> Epsilon Centauri </li> <li class = "star"> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (fra latin proxima - tættest) er en rød dværg, der tilhører Alpha Centauri-stjernesystemet, den nærmeste stjerne til jorden efter solen. </div> </li> </ul>Lad os style og skjule tipblokken ved hjælp af CSS:
.stjerne { position:i forhold; } / * stilarter til værktøjstip * / .star .tooltip { display: ingen; position: absolut; top: 50%; transform: translateY (-50%); venstre: 100%; } / * stilarter til dekorativ trekant * / .star .tooltip: før {...} / * popup værktøjstip på svævning * / .star: hover .tooltip {display: block; }
Listens stilarter og selve værktøjstip kan være hvad som helst, de udelades for kortfattethed.
Placering af værktøjstip i en separat blok giver dig mulighed for at bruge billeder inde i det, formatere tekst og endda oprette pseudo-elementer til et smukt design.
Demonstrer oprettelse af værktøjstippseudo-elementet hjælper det grafiske editorpanel. Hvert værktøj præsenteres som et ikon, hvis formål kan være uforståeligt for en uerfaren bruger. For at ingen efterlader ulykkelige, skal der tilføjes tip med navne til ikonerne.
Panelets HTML-kode vil se sådan ud:
<div class = "instrumenter"> <div class = "instrument"data-tooltip = "Pensel"> <img src = "/ images / brush-icon.svg"> </div> <div class = "instrument" data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </div> <div class = "instrument" data-tooltip = "Zoom ind"> <img src = "/ images / zoom-in-icon.svg"> </div> <div class = "instrument" data-tooltip = "Zoom ud"> <img src = "/ images / zoom-out-icon.svg"> </div> </div>Instrumentets unikke navn er placeret i attributten data-værktøjstip... Der er et ikon inde i blokken, men selve værktøjstip mangler i HTML-koden.
Da værktøjstip kun indeholder kort forklarende tekst, kan du bruge pseudo-elementer for at undgå rod i lyspanelet.
/ * generelle stilarter for ikonet * / ...instrument { position: relativ; farve: # 666; baggrund: hvid; markør: markør; } / * stilarter til ikon på svæver * / .instrument: svæver { baggrund: # 666; farve: hvid; } / * stilarter til værktøjstip * / .instrument: svæver: efter { indhold: attr (data-værktøjstip); position: absolut; venstre: 100%; farve: # 666; }Pseudo-elementet vises kun på musen, så det er ikke nødvendigt at skjule det med display: block. Dens placering styres af ejendomme position og venstre / højre / top / bund... For at komme fra en attribut data-værktøjstip mål-CSS-værktøjstip-indholdselementet giver funktionen attr ()... Dekorative stilarter er udeladt for kortfattethed.
De tidligere diskuterede værktøjstipmekanismer reagerede på musen svæver over målelementet og var baseret på en CSS-pseudoklasse : svæver... I nogle situationer foretrækkes det at åbne værktøjstip ved klik. Denne effekt er let at implementere i JavaScript, men CSS kan gøre jobbet.
Blandt listen over CSS-pseudoklasser er en vidunderlig klasse : fokustilgængelig for links og inputelementer. I modsætning til : svæversom forsvinder så snart markøren forladermus, denne pseudoklasse giver dig mulighed for at gemme målelementets aktive tilstand. Og hvis inputfelter er semantisk ikke særlig velegnede til oprettelse af værktøjstip, er links fine.
Lad os erstatte listeelementet fra det første eksempel med et link:
<a class = "star" href = "javascript:ugyldigt (0) "> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (fra latin proxima - tættest) er en rød dværg, der tilhører Alpha Centauri-stjernesystemet, den nærmeste stjerne til jorden efter solen. </div> </a>
Attribut href med mening Javascript Void 0) er nødvendigt for at forhindre enhver browserreaktion ved at klikke på linket.
Følgende stilarter giver dig mulighed for at påkalde et værktøjstip, der beskriver stjernen ved klik:
.star .tooltip { display: ingen; } .star: fokus. værktøjstip { display: blok; }Linket opretholder fokus, indtil brugeren klikker et vilkårligt sted på siden.
Så et værktøjstip på et websted kan oprettes på mange måder, selv uden at bruge JavaScript. Hver af dem er gode, du skal bare vælge den bedst egnede til en bestemt situation.
