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.

5 Analytische hulpmiddelen voor betere Twitter-marketing

Social media is een handige methode voor elke persoon om de marketing een stap verder te brengen. Twitter is een optie als je dit wilt doen, maar soms kan het een beetje ingewikkeld worden om erachter te komen wat wel en wat niet werkt. Onlangs heeft Twitter Twitter Analytics vrijgegeven om ons te helpen met dat kleine probleem

(Technische en ontwerptips)

8 JavaScript-bibliotheken om SVG te animeren

SVG is een resolutie-onafhankelijke afbeelding. Dat betekent dat het er op elk type scherm goed uit zal zien zonder kwaliteitsverlies . Daarnaast kun je SVG tot leven laten komen met een aantal animatie-effecten.In een van de eerdere posts van onze SVG-serie hebben we je laten zien hoe SVG-animatie werkt met de element zij het op een laag niveau

(Technische en ontwerptips)