Share
Tooltips zijn relatief eenvoudig te implementeren door gewoon een stukje markup aan je HTML toe te voegen en een beetje CSS te gebruiken. Als u echter nog nooit hebt gehoord van HTML5-gegevenskenmerken, wilt u misschien deze alternatieve (en veel schonere) aanpak eens bekijken.
Als je de Admin Bar-serie hebt gevolgd, zou deze screencast het goed af moeten maken. als jij hebben niet heb meegemaakt, maak je geen zorgen; deze screencast leert je iets dat je in allerlei situaties kunt gebruiken. We gaan een aantal opties bekijken om onze tooltips in gebruik te nemen.
Als je, om een gekke reden, liever niet kijkt hoe ik dingen demonstreer, hieronder staan een paar fragmenten om mee te nemen en mee te spelen. Opmerking: dit zijn vereenvoudigde voorbeelden - misschien wilt u browservoorvoegsels toevoegen en extra stijlen, enz.
Het eerste voorbeeld gebruikt extra markup in de vorm van een in ons anker. Het werkt prima, stelt ons in staat om een decoratief 'punt' aan onze tooltip toe te voegen en is op dit moment de veiligere optie als het gaat om browsercompatibiliteit.
HTML:
Accentsconagua
Dit is de linkdit is de tip! CSS:
a.tooltip span font-size: 10px; positie: absoluut; z-index: 999; white-space: nowrap; bodem: 9999px; links: 50%; achtergrond: # 000; color: # e0e0e0; opvulling: 0px 7px; regelhoogte: 24 px; hoogte: 24 px; dekking: 0; overgang: opacity 0.4s ease-out; a.tooltip span :: before content: ""; weergave: blok; border-left: 6px solid # 000000; border-top: 6px solid transparant; positie: absoluut; top: -6px; links: 0px; a.tooltip: hover span opacity: 1; bodem: -35px;
Dit is het voorbeeld dat onze opmaak opruimt, de HTML5 gebruikt data-attribuut om de waarde van onze tooltip en de CSS te behouden ::voor pseudo-element om het weer te geven. Veel netter.
HTML:
Dit is de link
CSS:
a.tooltip :: before content: attr (data-tip); lettergrootte: 10px; positie: absoluut; z-index: 999; white-space: nowrap; bodem: 9999px; links: 50%; achtergrond: # 000; color: # e0e0e0; opvulling: 0px 7px; regelhoogte: 24 px; hoogte: 24 px; dekking: 0; overgang: opacity 0.4s ease-out; a.tooltip: hover :: before opacity: 1; bodem: -35px;
