Fra forfatteren: Hallo. Et verktøytips er en liten forklarende tekst som vises når du holder markøren over et element, vanligvis et bilde. I dag skal vi se på hvordan du kan lage et verktøytips i HTML på forskjellige måter.

Standard hint

Som standard er tittelattributtet ansvarlig for å vise forklarende tekst. Den kan brukes til ulike elementer, men brukes vanligvis kun til bilder for å forklare hva de viser.

I en av de forrige artiklene brukte jeg et bilde av en tiger for å vise arbeid med bildestørrelser. Hvis du ikke har noe imot det, bruker jeg dette bildet igjen. Så for å vise et hint, trenger du bare å legge til tittelattributtet og skrive ønsket tekst i den.

< img src = "tiger.jpg" title = "Dette er en tiger" >

Det kan være enten ett ord eller flere setninger. Og slik ser det ut:

Hintet vises jevnt, ikke umiddelbart etter sveving, men etter litt tid. Dette er standard oppførsel.

Hovedproblemet med et slikt verktøytips er at det ikke kan stiliseres. Hvordan løse dette problemet? Vi må gi et hint på andre måter. Nå skal jeg vise deg et par.

Ren css-metode

En veldig interessant måte som lar deg vakkert vise et hint til et bilde. HTML-oppmerkingen er enkel, bare bildet må legges i en blokkbeholder, som vi vil tilordne en identifikator slik at vi senere kan referere til det i stiler:

< div id = "tiger" data - name = "Sumatran tiger"> < img src = "tiger.jpg" > < / div >

Det eneste som kan være uklart for deg her er data-navn-attributtet. Saken er at dette er et såkalt dataattributt som ikke gjør noe på egen hånd, men verdien kan brukes i css og javascript, noe som gjør det nyttig i noen tilfeller. Du vil se dette neste.

Så la oss først beskrive stilene for beholderen. Vi trenger relativ posisjonering fordi vi absolutt vil posisjonere blokken med forklarende tekst slik at posisjoneringen skjer i forhold til overordnet blokk, og ikke hele siden.

#tiger( posisjon: relativ; display: inline-block; )

#tiger( stilling: pårørende; display: inline - blokk;

Blokklinjevisning vil forhindre at blokken (og med den blokken med verktøytipset som vi skal lage) strekker seg over hele vinduets bredde. Det gjenstår bare å lage hintet selv. I CSS er det veldig praktisk å gjøre dette ved å bruke pseudo-elementer. Som dette:

#tiger:hover:etter ( innhold: attr(datanavn); posisjon: absolutt; venstre: 0; bunn: 0; bakgrunn: rgba(5,13,156,.55); farge: #fff; tekstjustering: midtstilt ; font-family: kursiv; font-size: 14px; utfylling: 3px 0; width: 100%; )

#tiger:hover:etter ( innhold: attr (data - navn); posisjon: absolutt; venstre: 0; bunn: 0; bakgrunn: rgba(5, 13, 156, . 55); farge : #fff; tekst - align : center ; font - familie : kursiv ; skriftstørrelse: 14px; polstring: 3px 0; bredde: 100 %;

Det er mye kode, men det er ikke noe komplisert her. #tiger:hover:etter-velgeren betyr følgende: når vi holder musepekeren over en blokk med et bilde, må vi lage et etter-pseudo-element (og da er reglene oppført med krøllete klammeparenteser). Content: attr(data-name) egenskapen setter tekstverdien til blokken. Det vil være lik det som er skrevet i datanavn-attributtet til bildeomslagsblokken.

Dette verktøytipset dukker opp når du holder musepekeren over bildet, men i motsetning til standarden gjør det dette brått, og selve utseendet oppstår umiddelbart i hoveøyeblikket. I dette tilfellet vil det ikke være mulig å implementere en jevn overgang, fordi jevne overganger ikke støttes for pseudo-elementer.

Metode 2. Ren css og jevnt utseende

Men ved å omskrive koden ganske mye, kan du oppnå et jevnt utseende av verktøytipset, og igjen, uten å bruke javascript.

For å se selv de 2 effektene som jeg vil vise deg neste gang, anbefaler jeg å åpne Notepad eller en hvilken som helst praktisk koderedigerer og gjenta alt etter meg. Sant nok, for dette må du fortsatt inkludere en stilfil, selv om stiler også kan skrives i html i tagger

Verktøytipsinnhold fjernes fra visningen ved å bruke en negativ marg-venstre-egenskap i stedet for display: none eller visibility: skjult fordi noen skjermlesere ignorerer disse egenskapene.

CSS-stiler for verktøytips

Vi vil snart få verktøytips til å fungere på samme måte i forskjellige nettlesere. La oss nå legge til noen linjer med CSS-kode.

Ved å legge til følgende kodebit vil vi vise verktøytips på skjermen, selv om de vil se banale ut og vil være vanskelige å visuelt skille fra resten av teksten.

CSS for å vise verktøytips

.tooltip:hover span ( font-familie: Calibri, Tahoma, Genève, sans-serif; posisjon: absolutt; venstre: 1em; topp: 2em; z-indeks: 99; margin-venstre: 0; bredde: 250px; ) . tooltip:hover img ( kantlinje: 0; margin: -10px 0 0 -55px; float: venstre; posisjon: absolutt; ) .tooltip:hover em (font-family: Candara, Tahoma, Geneva, sans-serif; font-size : 1,2em; font-weight: fet; display: blokk; polstring: 0,2em 0 0,6em 0; ) .classic (polstring: 0,8em 1em; ) .custom (polstring: 0,5em 0,8em 0,8em 2em; ) *html a:hover ( bakgrunn: gjennomsiktig; )

Behov for *html-streng

Du lurer kanskje på hvorfor den siste linjen i koden ovenfor er inkludert? Det setter gjennomsiktigheten for bakgrunnen til lenken. Mens jeg testet verktøytips, oppdaget jeg en merkelig effekt i IE6 som ikke kunne fjernes så lenge koblingsbakgrunnen eksisterte!

Koden ovenfor sikrer funksjonaliteten til verktøytips. De vises på skjermen, men de er ganske vanskelige å skille fra den generelle teksten. Det er ingen fargevalg som gjør at verktøytipsteksten skiller seg ut på siden.

Angi fargeskjemaet for verktøytips/

Følgende kode setter et fargeskjema for hver av de fem verktøytipsstilene.

Etter å ha endret sidekoden og oppdatert den i nettleseren, vil verktøytips vises når du holder musen over lenken nesten likt i alle nettlesere.

CSS-kode for fargevalg

.classic ( bakgrunn: #FFFFAA; kantlinje: 1px solid #FFAD33; ) .kritisk ( bakgrunn: #FFCCAA; kantlinje: 1px solid #FF3334; ) .help ( bakgrunn: #9FDAEE; kantlinje: 1px solid #2BB0D7; ) .info ( bakgrunn: #9FDAEE; kantlinje: 1px solid #2BB0D7; ) .advarsel ( bakgrunn: #FFFFAA; kantlinje: 1px solid #FFAD33; )

CSS-koden er veldig enkel, men den gir et flott utseende til verktøytips og gjør jobben sin overalt. Fargeskjemaet kan endres etter eget skjønn.

Noen få trykk på CSS3 for avansert verktøytipsvisning

Før vi fullfører denne opplæringen, legger vi til noen linjer med CSS3-kode for å legge til visuelle effekter i verktøytipsene våre. La oss sette avrundede hjørner ved å bruke egenskapen border-radius og legge til en dimensjon ved å bruke box-shadow-egenskapen.

Siden ingen av disse egenskapene støttes globalt, vil de bare fungere i noen av de nyeste nettleserversjonene. Men der de fungerer, vil verktøytipsene se elegante og sexy ut!

La oss legge til koden nedenfor i selector.tooltip:hover span og oppdatere siden.

Visuelle effekter for kantlinje, skygge og gjennomsiktighet løfter verktøytipset over sideteksten og gjør informasjonen kontrastrik og lett å lese.

Du legger kanskje merke til at ikke bare de offisielle CSS3-egenskapene brukes, men også utvidelser for Mozilla og WebKit.

Ytterligere CSS-egenskaper for nye nettlesere

kantradius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Sammendrag

Denne opplæringen viser at det ikke krever mye innsats å forbedre grensesnittet. I tillegg er det verdt å gjennomgå opplevelsen av å bruke CSS, som kan være nyttig for å sette et nytt nivå av interaktivitet for en nettapplikasjon.