Ytterligare information på webbplatser är oftaplaceras i form av popup-tips vid hovring, till exempel för att tyda komplexa förkortningar eller förtydliga användaråtgärder. En sådan gränssnittslösning kallas verktygstips. Det sparar utrymme på sidan genom att endast basdata visas, men lämnar läsaren möjlighet att titta på tilläggen vid behov. Utöver sin rent informationsfunktion kan verktygstips vara viktiga designelement som betonar webbplatsens övergripande stil och drar till sig uppmärksamhet.
Tips blockbeteende
Elementet vars interaktion gör att verktygstipset visas kallas målelementet.
Popup-block innehåller vanligtvis viktiga,men inte grundläggande information. Användaren förväntas läsa den endast om han/hon vill. För att inte irritera, störa eller distrahera från huvudinnehållet måste verktygstipset uppfylla ett antal krav:
- Jämn uppkomst.Att av misstag sväva markören över ett målelement bör inte åtföljas av ett verktygstips som plötsligt hoppar ut. Detta kan fortfarande vara acceptabelt för små textblock, men är absolut inte lämpligt om verktygstipset är stort eller innehåller bilder.
- Tillräckligt boende.Verktygstipsfönstret bör inte täcka innehållet det förklarar så att användaren kan jämföra data. I de fall verktygstipset i första hand är dekorativt är detta acceptabelt.
- Inget inflytande på annat innehåll.Verktygstips är utformade för att vara små, subtila hjälpmedel för användaren, så de borde inte vara till besvär. Rätt verktygstips flyttar inte intilliggande block och sträcker sig inte bortom sidan, vilket skapar rullningslister.
- Synlighet. Verktygstipset ska vara synligt i sin helhet och får inte överlappa andra element eller gömma sig bakom kanten på webbläsarfönstret.
- Enkel kontroll. Det är viktigt att användaren intuitivt förstår hur man visar och tar bort verktygstips och inte upplever svårigheter med dessa åtgärder.
Verktygstips i ren HTML
Möjligheten att skapa tips är inbyggd i hypertextmarkeringsspråket på själva webbsidorna. Det var ursprungligen avsett att dechiffrera förkortningar och komplexa vetenskapliga termer.
För att skapa ett sådant popup-block behöver du ett title-attribut, som är tillgängligt för alla HTML-taggar.
<p> Proxima Centauri ligger ungefär4.22 <i title="9,460,730,472,580,800 meter">ljusår</i> från jorden, vilket är 270 tusen gånger större än avståndet från jorden till solen. </p> <img title="Neuschwanstein Castle" src="/images/disney.jpg">
De främsta fördelarna med ett verktygstips i HTML: användarvänlighet och möjligheten att använda med alla layoutelement - från text till bilder. Men det har också stora nackdelar:
- text kan inte formateras;
- utseendet är för enkelt och kan inte ändras;
- bristande förmåga att infoga bilder.
HTML title-attributet är endast lämpligt för små verktygstips som inte kräver speciell design. Annars är det användbart att veta hur man skapar verktygstips med hjälp av CSS.
CSS-verktygstips
Du kan skapa ett vackert anpassat verktygstipsblock med hjälp av Cascading Style Sheets. Detta använder grundläggande CSS-koncept:
- absolut positionering - för att dra ut en ledtråd från dokumentets allmänna flöde;
- Helt dölja ett block i ett inaktivt tillstånd med hjälp av en egenskap
visa; - pseudoklass
:sväva, som tilldelas ett element under muspekaren; - pseudoelement
:innanoch:efter, som kan användas för enkla verktygstips utan att behöva skapa ett separat HTML-element; - animering och mjuka förändringar av egenskaper för vackert utseende och försvinnande effekter.
Alla dessa egenskaper stöds väl av moderna webbläsare, vilket säkerställer tillförlitlig drift av verktygstipsmekanismen.
Pseudoklass :sväva, förutom att sväva markören, reagerar även på fingertouch på pekskärmen, vilket gör att du kan stödja mobila prylar.
Block eller pseudoelement
Ett CSS-verktygstips kan antingen vara ett separat HTML-block med sin egen struktur, eller ett pseudo-element av ett annat block. Vart och ett av dessa alternativ har sina för- och nackdelar som bör övervägas.
Det är mycket lättare att manipulera innehåll i en separat behållare. Du kan placera bilder, rubriker och andra element i den.
Pseudoelementet låter dig bli av med onödigablock och gör layouten lite enklare. Textinnehållet kan placeras i target element-attributet och du behöver inte oroa dig för att skapa själva verktygstipset, CSS kommer att göra allt. Pseudoelementet är dock inte väl lämpat för ett block med en komplex struktur. Dessutom kan den bara skapas för att stänga taggar. Du kan inte bifoga en sådan ledtråd direkt till en bild.
Skapa ett popup-block med CSS
Låt oss skapa ett vackert designat verktygstips med en komplex struktur för den närmaste stjärnan från stjärnbilden Centaurus.
Först och främst, låt oss definiera HTML-uppmärkningen:
<h2>Stjärnor i stjärnbilden Centaurus</h2> <ulclass="stjärnor"> <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 (av latin proxima - närmast) är en röd dvärg som tillhör stjärnsystemet Alpha Centauri, den stjärna som ligger närmast jorden efter solen. </div> </li> </ul>Låt oss utforma och dölja verktygstipsblocket med CSS:
.star { placera:relativ; } /* stilar för verktygstips */ .star .tooltip { display: ingen; position: absolut; topp: 50%; transform: translateY(-50%); vänster: 100%; } /* stilar för dekorativ triangel */ .star .tooltip:before { ... } /* verktygstips visas när du håller muspekaren */ .star:hover .tooltip { display: block; }
Stilarna i listan och själva verktygstipset kan vara vilka som helst, för korthetens skull utelämnas de.
Genom att placera ett verktygstips i ett separat block kan du använda bilder inuti det, formatera text och till och med skapa pseudoelement för en vacker design.
Pseudo-element verktygstips
Demonstrera att du skapar ett verktygstipsDen grafiska redigeringspanelen hjälper till med pseudoelementet. Varje verktyg presenteras i form av en ikon, vars syfte kanske inte är tydligt för en oerfaren användare. För att säkerställa att ingen går missnöjd, bör ikoner ges tips med namn.
Panelens HTML-kod kommer att se ut så här:
<div class="instruments"> <div class="instrument"data-tooltip="Brush"> <img src="/images/brush-icon.svg"> </div> <div class="instrument" data-tooltip="Fyll"> <img src="/images/color-fill-icon.svg"> </div> <div class="instrument" data-tooltip="Zooma in"> <img src="/images/zoom-in-icon.svg"> </div> <div class="instrument" data-tooltip="Zooma ut"> <img src="/images/zoom-out-icon.svg"> </div> </div>Det unika namnet på verktyget placeras i attributet data-verktygstips. Det finns en ikon inuti blocket, men själva verktygstipset saknas i HTML-koden.
Eftersom verktygstipset bara kommer att innehålla kort förklarande text kan du använda pseudoelement för att undvika att den lätta panelen blir rörig.
/* allmänna stilar för ikonen */ .instrument { position: relativ; färg: #666; bakgrund:vit; markör: pekare; } /* stilar för svävningsikonen */ .instrument:hover { bakgrund: #666; färg vit; } /* stilar för verktygstips */ .instrument:hover:after { innehåll: attr(data-verktygstips); position: absolut; vänster: 100%; färg: #666; }Pseudoelementet visas bara vid hovring, så det finns inget behov av att dölja det med display: block. Dess läge regleras av fastigheter placera och vänster/höger/överst/botten. Att få från ett attribut data-verktygstips verktygstips innehållselement mål CSS tillhandahåller funktionen attr(). Dekorativa stilar har utelämnats för korthetens skull.
Utseendet av ett verktygstips när du klickar utan skript
Verktygstipsmekanismerna som diskuterats hittills reagerade på att sväva muspekaren över målelementet och var baserade på en CSS-pseudoklass :sväva. I vissa situationer är det att föredra att öppna ett verktygstips vid klick. Denna effekt är lätt att implementera i JavaScript, men CSS kan också klara uppgiften.
Bland listan över CSS-pseudoklasser finns en underbar klass : fokus, tillgänglig för länkar och inmatningselement. Till skillnad från :sväva, som försvinner så fort markören lämnarmus, låter denna pseudoklass dig spara aktivitetstillståndet för målelementet. Och om inmatningsfält semantiskt sett inte är särskilt lämpliga för att skapa ett verktygstips, är länkar ganska lämpliga.
Låt oss ersätta listelementet från det första exemplet med en länk:
<a class="star" href="javascript:void(0)"> Proxima Centauri <div class="tooltip"> <img src="/images/proxima.jpg"> Proxima Centauri (av latin proxima - närmast) är en röd dvärg som tillhör stjärnsystemet Alpha Centauri, den stjärna som ligger närmast jorden efter solen. </div> </a>
Attribut href med mening javascript:void(0) är nödvändigt för att förhindra reaktion från webbläsaren när länken klickas.
Följande stilar låter dig anropa ett verktygstips med en beskrivning av stjärnan vid klick:
.star .tooltip { display: ingen; } .star:focus .tooltip { display: block; }Länken kommer att behålla fokus tills användaren klickar var som helst på sidan.
Så ett verktygstips på en webbplats kan skapas på olika sätt, även utan att använda JavaScript. Var och en av dem är bra, du behöver bara välja den mest lämpliga för en viss situation.
