Accentsconagua

Rask Tips Verktøytips, Hilsen HTML5 Data Attributter

Webdesign
Share

Verktøytips er relativt enkle å implementere ved bare å legge til litt markering i HTML-en din og bruke litt av CSS. Men hvis du aldri har hørt om HTML5-dataattributter, vil du kanskje sjekke ut denne alternative (og mye renere) tilnærming.

Se Screencast

Hvis du har fulgt Admin Bar-serien, bør denne skjermbildet fullføre ting godt. Hvis du har ikke har fulgt med, ikke bekymre deg; denne screencast vil lære deg noe du kan bruke i alle slags situasjoner. Vi skal se på et par alternativer for å få våre verktøytips oppe.

Hvis du av en eller annen gal grunn, vil du heller ikke se meg demonstrere ting, nedenfor er et par utdrag å ta bort og leke med. Merk: Dette er forenklede eksempler - du vil kanskje legge til nettleserprefiks og ekstra styling etc.

Verktøytipsutdrag: Lagt til Markup

Det første eksemplet bruker ytterligere markering i form av a innenfor vårt anker. Det fungerer fint, lar oss legge til et dekorativt "poeng" til vårt verktøytips, og er for øyeblikket det sikrere alternativet der nettleserkompatibilitet er opptatt.

HTML:

 Dette er lenkendette er tipset!

CSS:

 a.tooltip span font-size: 10px; stilling: absolutt; z-indeks: 999; white-space: NOWRAP; bottom: 9999px; venstre: 50%; bakgrunn: # 000; color: # e0e0e0; polstring: 0px 7px; linjehøyde: 24px; høyde: 24px; opasitet: 0; overgang: opacity 0,4s utelukkelse;  a.tooltip span :: før innhold: ""; skjerm: blokk; border-left: 6px solid # 000000; border-top: 6px solid gjennomsiktig; posisjon: absolutt; topp: -6px; venstre: 0px;  a.tooltip: hover span opacity: 1; bottom: -35px;

Verktøytipsutdrag: HTML5-dataattribusjon

Her er eksemplet som rydder opp vår oppfølging, bruker HTML5 data-attributt å holde verdien av verktøytipset, og css ::før pseudo-element for å vise det. Mye penere.

HTML:

 Dette er lenken

CSS:

 a.tooltip :: før innhold: attr (data-tip); skriftstørrelse: 10px; stilling: absolutt; z-indeks: 999; white-space: NOWRAP; bottom: 9999px; venstre: 50%; bakgrunn: # 000; color: # e0e0e0; polstring: 0px 7px; linjehøyde: 24px; høyde: 24px; opasitet: 0; overgang: opacity 0,4s utelukkelse;  a.tooltip: hover :: før opacity: 1; bottom: -35px;

Nyttige ressurser

  • John Resig på HTML5 Data Attributter
  • W3.org referanse på HTML5 Data Attributter
  • Dan Eden bruker HTML5 Data Attributter for navigasjonsnibbles
  • Chris Coyier diskuterer overganger på css generert innhold
Webdesign
×