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 dingen om te doen met uw afgewezen Guest Post Pitch

Heb je ooit een idee van een gastpost op een blog gezet, alleen om een ​​beleefde afwijzing terug te krijgen - of nog erger, helemaal geen antwoord? Het doet pijn, toch? Afwijzing kan je verbitteren ("Maar dit is een geweldig idee! Hoe konden die blogbezitters anders denken?"), Of je met twijfel aan jezelf vullen ("Nou, ik denk dat dit toch een stom idee was.&qu

(Technische en ontwerptips)

Zoek en deel technische gesprekken met Speakerdex Community

De Speakerdex-site is een bron als geen ander. Het beheert honderden tech-talks uit alle gebieden, zoals webontwikkeling, UI-ontwerp, gebruikerservaring en kunstmatige intelligentie.De meeste van deze video's worden rechtstreeks door de organisatoren van de conferentie ingediend, maar ze bevatten ook inzendingen van sprekers

(Technische en ontwerptips)