Gemakkelijk geanimeerde tooltip maken met Hint.css

Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

Tooltip is een geweldige manier om extra informatie op een website weer te geven zonder extra ruimte in te nemen . De tooltip verschijnt meestal bij een muisaanwijzer en er zijn waarschijnlijk honderden jQuery-invoegtoepassingen met fraaie tooltips op uw website.

Echter, een aantal veel voorkomende nadelen van het gebruik van jQuery plug-in is dat het wordt geleverd met een set van nutteloze opties, en opgeblazen met codes die de prestaties van de website vertragen.

Dus vandaag gaan we een alternatief bekijken voor het maken van tooltip. Met een hele reeks nieuwe functies in CSS3 is het nu mogelijk om een ​​vergelijkbare fancy tooltip te maken met alleen CSS. Laten we beginnen.

Hint.css gebruiken

In deze post gaan we niet van nul bouwen. We zullen Hint.css gebruiken. Hint.css is een verzameling klassen- en stijlregels, waarmee we sneller een eenvoudige tooltip kunnen maken. Om te gebruiken, voegt u eenvoudig het stylesheet toe aan uw HTML-document of kopieert u alle stijlregels naar uw eigen stylesheet.

Nu, wikkel in uw documenttekst het stuk waarvan u een tooltip wilt invoegen met een inline-element, zoals een span- of ankerelement. En voeg de tooltip-inhoud toe met het kenmerk data-hint, zoals dat het geval is.

 across the globe are filled with freelance contractors all tendering for a limited amount of jobs. Omdat de freelance marktplaatsen over de hele wereld gevuld zijn met freelance aannemers, bieden ze al een aanbesteding voor een beperkt aantal banen. 

Technisch gezien is dit alles wat je nodig hebt. Als u een voorbeeld van uw document in de browser bekijkt en over uw muis rolt, zou u de tooltip moeten zien verschijnen.

Deze tooltip wordt weergegeven met pseudo-element en CSS3 Transition gebruikt voor de geanimeerde verplaatsing.

Geef het een idee

Tenzij u een ankerelement gebruikt dat standaard met onderscheidende stijlen wordt geleverd, is er geen indicatie dat het betreffende woord een knopinfo zal weergeven zoals die in de bovenstaande schermafbeelding. Gebruikers zullen dus waarschijnlijk geen idee hebben.

Dus omwille van een betere gebruikerservaring kunnen we een aantal extra stijlen toevoegen om het een indicator te geven, bijvoorbeeld:

 span [data-hint] {border-bottom: 1px dotted #aaa; } span [data-hint]: hover {cursor: pointer; } 

Deze stijlen geven het spanelement met het kenmerk data-hint een onderrand met stippellijn. U kunt de stijlen aanpassen aan uw ontwerpvereiste.

Tooltip Richting

We kunnen de tooltip in vier verschillende richtingen tonen: boven, onder, rechts en links met behulp van de geboden klassen.

Links

 marktplaatsen 

Rechts

 marktplaatsen 

Top

 marktplaatsen 

Bodem

 marktplaatsen 

Of laat de knopinfo zien

 marktplaatsen 

Laatste gedachte

Met geavanceerdere eigenschappen in CSS3, zijn we tegenwoordig niet langer alleen afhankelijk van JavaScript of jQuery om een ​​mooie gebruikersinterface te maken, zoals het maken van een tooltip en het gebruik van Hint.css, we kunnen er in snap een maken. Maar zoals al vroeg in deze post werd vermeld, kunnen we met deze techniek alleen een eenvoudige tekstgebaseerde tooltip maken .

Als u een meer geavanceerde tooltip wilt maken, bijvoorbeeld een tooltip met afbeelding of de knopinfo tonen met de muis in plaats van met de muisaanwijzer, is het gebruik van JavaScript of jQuery nog steeds de betere manier om te gaan.

Stuur pushmeldingen voor de browser met push.js

Native mobiele apps hadden altijd ondersteuning voor pushmeldingen . Maar deze meldingen waren afwezig op internet totdat de API voor meldingen verscheen.De meldings-API werkt via JavaScript . Hiermee kunt u pushmeldingen rechtstreeks naar de computer van de gebruiker verzenden via hun browservenster

(Technische en ontwerptips)

10 coole vaders met geweldige kostuummakende vaardigheden

Als er een vaardige vaders ter wereld zijn waarop ze trots zijn, dan is het dat ze handig zijn met tools . Van het sanitair van het huis tot het bouwen van de traditionele boomhut, het is een vaardigheid die overal op kan worden toegepast. Er kan zelfs gezegd worden dat de handigheid van een vader met gereedschap echt schittert in combinatie met creativiteit en innovativiteit

(Technische en ontwerptips)