Share
Knopinfo is een geweldige manier om een gebruikersinterface te verbeteren als uw gebruikers wat extra context nodig hebben voor dat mooie pictogram, of als ze enige geruststelling willen voor het klikken op een knop, of misschien een bijschrift van Easter Egg om met een afbeelding mee te gaan. Laten we nu een aantal geanimeerde tooltips maken met niets anders dan HTML en CSS.
Dit is waar we naartoe werken:
Voordat we ons verdiepen in de ketel, laten we een kijkje nemen naar wat we eigenlijk brouwen. Het belangrijkste doel is om een eenvoudige manier te hebben om een tooltip toe te voegen, dus we doen dat door een aangepast bericht toe te voegen tooltip attribuut:
Accentsconagua
zichtbare tekst of pictogram, enz.Als u op zoek bent naar 508-compatibele tooltips, of slimmere tooltips nodig hebt met containerbotsingsdetectie en / of ondersteuning voor HTML-inhoud versus platte tekst, zijn er tal van oplossingen die scripts van derden gebruiken om deze behoeften voor u op te lossen.
"JavaScript is absoluut noodzakelijk om volledig toegankelijke interactieve componenten te maken." - Sara Soueidan, Een volledig toegankelijke Help-tooltip bouwen ... is moeilijker dan ik dacht
Deze tutorial behandelt niet specifiek toegankelijkheidsbehoeften. U kent uw gebruikers en wat ze nodig hebben, dus denk ook in dit opzicht aan hun behoeften.
Oh wacht. We hebben eerst een asterisk, over "geen extra markup nodig". Dit is tenslotte magie. Onze tooltips doen dat niet werkelijk heb extra DOM-elementen nodig aangezien ze volledig uit bestaan pseudo-elementen (de ::voor en ::na dingen) die we kunnen controleren via CSS.
Als je al gebruik maakt van de pseudo-elementen van een element uit een andere set stijlen en je wilt een tooltip voor dat element, dan moet je misschien een weinig beetje.
Wacht. Gremlins! Nog een waarschuwing: CSS positionering. Om ervoor te zorgen dat de tooltips goed werken, moet hun bovenliggende element (het item waaraan we de tooltip koppelen) zijn
positie: relatief, ofpositie: absoluut, ofpositie: vastEigenlijk, iets anders dan positie: statisch - dat is de standaardpositiemodus die vrijwel door de browser aan alle elementen is toegewezen. De tooltips zijn absoluut gepositioneerd en dus moeten ze de grenzen kennen waarin hun absoluutheid betekenis heeft. De standaardpositierichtlijn statisch verklaart niet zijn eigen grenzen en zal onze tooltips geen context geven om tegen te duwen, dus de tooltips zullen het volgende dichtstbijzijnde ouderelement gebruiken dat een opgegeven grens heeft.
U moet beslissen welke positierichtlijn het beste werkt met hoe u de tooltips gebruikt. Deze tutorial gaat ervan uit positie: relatief voor het bovenliggende element. Als uw gebruikersinterface vertrouwt op een absoluut gepositioneerd element, kan een herstructurering (extra markup) mogelijk ook nodig zijn om een tooltip op dat element in te zetten.
Laten we naar binnen springen en kijken wat er aan de hand is.
De meeste CSS-regels zijn geschreven met klasnamen in gedachten, zoals .dit ding, maar CSS heeft een handvol selectortypen. Onze magische tooltips gaan attribuutselectoren gebruiken - dat is de notatie van de vierkante haakjes:
[foo] background: rgba (0, 0, 0, 0.8); kleur: #fff;
Wanneer de browser zoiets tegenkomt:
Bekijken!het zal weten dat het de [Foo] regels omdat dat tag heeft een attribuut met de naam foo. In dit geval heeft de reeks zelf een doorschijnende zwarte achtergrond met witte tekst.
HTML-elementen hebben verschillende ingebouwde kenmerken, maar we kunnen ook onze eigen kenmerken verzinnen. Net zoals foo, of tooltip. HTML weet standaard niet wat dit betekent, maar met CSS kunnen we aan HTML vertellen wat dit betekent.
We gebruiken attribuutselectoren voornamelijk voor een scheiding van punten van zorg. Het gebruik van attributen boven classnames levert ons geen bonuspunten op in de specificity oorlogen; klassen en attributen hebben dezelfde specificiteit. Door attributen te gebruiken, kunnen we onze inhoud met de inhoud behouden, omdat HTML-kenmerken waarden kunnen hebben, terwijl class-namen dat niet doen.
Overweeg de klassennaam .tooltip tegen het attribuut [Tooltip] in deze voorbeeldcode. De klassennaam is een van de waarden voor het attribuut [klasse] terwijl het tooltip-kenmerk heeft een waarde, de tekst die we willen weergeven.
lorem ipsum lorem ipsum
Onze tooltips zullen twee verschillende attributen gebruiken:
tooltip: dit bevat de inhoud van de tooltip (een tekst zonder opmaak)stroom: facultatief; dit stelt ons in staat om te bepalen hoe de tooltip te ontmaskeren. Er zijn veel plaatsingen die we kunnen ondersteunen, maar we behandelen vier veel voorkomende plaatsingen:Laten we nu het grondwerk voor alle tooltips instellen. De regels uit stappen 1-5 zijn van toepassing op alle tooltips, ongeacht wat stroom we geven ze. Stappen 6-7 hebben onderscheid tussen de verschillende stroom waarden.
Dit is voor het bovenliggende element van de tooltip. Laten we een positierichtlijn toewijzen zodat de absolute positionering van de onderdelen van de tooltip (de ::voor en ::na pseudo-elementen) worden gepositioneerd in de context van dit bovenliggende element en niet in de context van de pagina in het algemeen of een grootouderelement of een ander buitenelement in de DOM-structuur.
[tooltip] positie: relatief;
Het is tijd om de pseudo-elementen te primen. Hier zullen we gemeenschappelijke eigenschappen instellen voor zowel de ::voor en ::na stukken. De inhoud eigenschap is wat een pseudo-element daadwerkelijk doet werken, maar we komen er snel aan.
[tooltip] :: before, [tooltip] :: after line-height: 1; gebruikersselectie: geen; pointer-events: geen; positie: absoluut; Geen weergeven; dekking: 0; / * meningen * / text-transform: none; lettertypegrootte: .9em;
Ik weet niet waarom "dink" logisch is, ik heb het zo altijd zo genoemd. Dit is het kleine driehoekige punt dat de tooltips hun geeft spraak bubbel voel door te wijzen op het ding dat het opriep. Merk op dat we gebruiken transparant voor de randkleur; we zullen later de kleur toevoegen, want hoe we het toevoegen hangt af van de tooltip's stroom.
[tooltip] :: before content: "; z-index: 1001; border: 5px solid transparent;
Het is geen typfout dat het inhoud:"; declaratie heeft een lege tekenreeks voor een waarde. We willen daar niets in, maar we hebben die eigenschap nodig om het pseudo-element te laten bestaan.
Om een driehoek te maken, definiëren we een vaste rand met wat dikte op een lege doos (geen inhoud) zonder breedte en zonder hoogte, en geven we slechts één zijde van de doos een randkleur. Raadpleeg de volgende zelfstudie voor meer informatie:
Hier is het vlees van het ding. Let op de inhoud: attr (tooltip) deelwoord: "Dit pseudo-element moet de waarde van de gebruiken tooltip attribuut als de inhoud. "Daarom is het gebruik van attributen over classnames zo geweldig!
[tooltip] :: na content: attr (tooltip); / * magie! * / z-index: 1000; / * het grootste deel van de rest hiervan is opinion * / font-family: Helvetica, sans-serif; text-align: center; / * Laat de inhoud de grootte van de tooltips instellen, maar dit zal ook voorkomen dat ze onaangenaam worden * / min-width: 3em; maximale breedte: 21em; white-space: nowrap; overloop verborgen; tekstoverloop: ellips; / * zichtbaar ontwerp van de tooltip bubbels * / opvulling: 1ch 1.5ch; grensradius: .3ch; box-shadow: 0 1em 2em -.5em rgba (0, 0, 0, 0.35); achtergrond: # 333; kleur: #fff;
Let op de z-index waarden voor zowel de dink als de bubble. Dit zijn willekeurige waarden, maar houd er rekening mee dat een z-index waarde is relatief. Betekenis: een z-indexwaarde van 1001 binnen een element met een z-index van 3 betekent alleen dat het 1001-element het bovenste element is binnen dat z-index: 3 houder.
De bubbel is z-index moet minstens één stap lager zijn dan die van de dink z-index. Als deze gelijk is aan of hoger is dan de dink, kan er een inconsistent kleureffect op de dink optreden als uw tooltips een box-shadow.
Voor een meer gedetailleerd overzicht van de eigenschap z-index, bekijk de volgende tutorial:
Onze tooltips worden geactiveerd door met de muis over het element te bewegen met de tooltip ... Bijna.
[tooltip]: hover :: before, [tooltip]: hover :: after display: block;
Als je terugkijkt op ons stijlblok in stap 2, zou je moeten zien dat we het hebben gebruikt dekking: 0; samen met Geen weergeven; voor onze tooltip-onderdelen. We hebben dit gedaan, zodat we CSS-animatie-effecten kunnen gebruiken wanneer de tooltips worden weergegeven en verborgen.
De tonen eigenschap kan niet worden geanimeerd, maar ondoorzichtigheid kan! We zullen de laatste animaties behandelen. Als u zich geen zorgen maakt om geanimeerde tooltips, hoeft u alleen de dekking: 0; verklaring van stap 2 en negeer de animatie in stap 7.
Het laatste wat we nodig hebben dat nog steeds van toepassing is op alle tooltips is een manier om een tooltip te onderdrukken als deze geen inhoud bevat. Als u tooltips vult met een soort dynamisch systeem (Vue.js, Angular of React, PHP, etc.), willen we geen gekke lege bubbels!
/ * laat geen lege tooltips zien * / [tooltip = "] :: before, [tooltip ="] :: after display: none! important;
Deze stap kan nogal gecompliceerd worden omdat we een aantal niet zo veel voorkomende selectors gebruiken om onze tooltips te helpen bij het afhandelen van hun plaatsingen op basis van hun stroom waarden (of gebrek daaraan).
"Er gebeuren vreemde dingen op de Circle-K." - Ted Theodore Logan
Voordat we in de stijlen springen, laten we enkele selectiepatronen bekijken die we zullen gebruiken.
[tooltip]: niet ([flow]) :: before, [tooltip] [flow ^ = "up"] :: before / * ... properties: values ... * /
Dit vertelt de browser: "Voor alle elementen met een tooltip attribuut dat ook niet Niet doen heb een stroom attribuut, of hebben een stroom met een waarde die begint met 'op': pas deze stijlen toe op zijn ::voor pseudo-element.”
We gebruiken hier een patroon, zodat deze kunnen worden uitgebreid naar andere flows zonder dat je zoveel CSS hoeft te herhalen. Dit patroon stroom ^ = "up" gebruikt de ^ = (begint met) matcher. Hiermee kunnen de stijlen ook worden toegepast op rechtop en linksboven als je die stroomregelaars wilt toevoegen. We gaan die hier niet behandelen, maar je kunt ze in gebruik zien in mijn originele tooltip-demo op CodePen.
Dit zijn de CSS-blokken voor alle vier de stromen die in deze zelfstudie worden behandeld.
/ * ALLEEN de :: before * / [tooltip]: not ([flow]) :: before, [tooltip] [flow ^ = "up"] :: before bottom: 100%; border-bottom-width: 0; border-top-kleur: # 333; / * ALLEEN de :: after * / [tooltip]: not ([flow]) :: after, [tooltip] [flow ^ = "up"] :: after bottom: calc (100% + 5px); / * Beide :: before & :: after * / [tooltip]: not ([flow]) :: before, [tooltip]: not ([flow]) :: after, [tooltip] [flow ^ = "up "] :: before, [tooltip] [flow ^ =" up "] :: after left: 50%; transformeren: vertalen (-50%, -5em);
[tooltip] [flow ^ = "down"] :: before top: 100%; border-top-width: 0; border-bottom-colour: # 333; [tooltip] [flow ^ = "down"] :: after top: calc (100% + 5px); [tooltip] [flow ^ = "down"] :: before, [tooltip] [flow ^ = "down"] :: after left: 50%; transformeren: vertalen (-50%, .5em);
[tooltip] [flow ^ = "left"] :: before top: 50%; border-right-width: 0; border-left-colour: # 333; links: calc (0em - 5px); transform: translate (-. 5em, -50%); [tooltip] [flow ^ = "left"] :: after top: 50%; rechts: calc (100% + 5px); transform: translate (-. 5em, -50%);
[tooltip] [flow ^ = "right"] :: before top: 50%; links-links-breed: 0; border-right-colour: # 333; rechts: calc (0em - 5px); transform: translate (.5em, -50%); [tooltip] [flow ^ = "right"] :: after top: 50%; links: calc (100% + 5px); transform: translate (.5em, -50%);
Animaties zijn geweldig. Animaties kunnen:
Onze tooltips vallen in die laatste beschrijving. Liever dan een tekstballon in het leven te roepen en er in een flits uit te komen, laten we ze maken zachtere.
We hebben er twee nodig @keyframe animaties. De tooltips omhoog / omlaag gebruiken de tooltips-vert keyframe en de links / rechts tooltips gebruiken de tooltips-horz keyframe. Merk op dat in beide van deze keyframes we alleen de gewenste eindstatus van de tooltips definiëren. We hoeven niet te weten waar ze vandaan komen van (de tooltips zelf hebben die stijlinformatie). We willen alleen bepalen waar ze naartoe gaan naar.
@keyframes tooltips-vert to opacity: .9; transformeren: transleren (-50%, 0); @keyframes tooltips-horz to opacity: .9; transformeren: transleren (0, -50%);
Nu moeten we deze keyframes toepassen op de tooltips wanneer een gebruiker zweeft over de triggerende elementen (de elementen met de [Tooltip] attributen). Omdat we verschillende flows gebruiken om te bepalen hoe de tooltips zullen verschijnen, moeten we die mogelijkheden in de stijlen identificeren.
[tooltip]: niet ([flow]): hover :: before, [tooltip]: not ([flow]): hover :: after, [tooltip] [flow ^ = "up"]: hover :: before, [ tooltip] [flow ^ = "up"]: hover :: after, [tooltip] [flow ^ = "down"]: hover :: before, [tooltip] [flow ^ = "down"]: hover :: after animatie: tooltips-vert 300ms voorwaartse uitweg; [tooltip] [flow ^ = "left"]: hover :: before, [tooltip] [flow ^ = "left"]: hover: after, [tooltip] [flow ^ = "right"]: hover: before, [tooltip] [flow ^ = "right"]: hover :: after animation: tooltips-horz 300ms move-out vooruit;
Denk eraan dat we het niet kunnen animeren tonen eigendom, maar we kunnen de tooltips een fade-in effect geven door het te manipuleren ondoorzichtigheid. We zijn ook bezig met het animeren van de eigenschap transform, die de tooltips een subtiele beweging geeft alsof ze naar binnen vliegen om naar hun triggerelementen te wijzen.
Let op de forwards sleutelwoord in de animatieverklaring. Dit vertelt de animatie om niet opnieuw in te stellen als het voltooid is, maar om verder te gaan en aan het einde te blijven.
Fantastische baan! We hebben veel behandeld in deze tutorial en hebben nu een keurige verzameling tooltips om te laten zien dat we hard werken:
We hebben alleen de oppervlakte van wat er kan worden gedaan met CSS-tooltips gekrast. Veel plezier met het spelen met hen en blijven experimenteren, en verzinnen van uw eigen recepten!
