Einfaches Erstellen eines animierten Tooltips mit Hint.css

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

Tooltip ist eine großartige Möglichkeit, zusätzliche Informationen auf einer Website anzuzeigen, ohne zusätzlichen Speicherplatz zu beanspruchen . Der Tooltip wird normalerweise beim Mouse-Hover angezeigt und es gibt wahrscheinlich Hunderte von jQuery-Plugins, die auf Ihrer Website ausgefeilte Tooltips enthalten.

Einige häufige Nachteile des jQuery-Plugins sind jedoch, dass es mit einer Reihe von nutzlosen Optionen und aufgeblähten Codes ausgestattet ist, die die Leistung der Website verlangsamen.

Daher werden wir uns heute eine Alternative zum Erstellen eines Tooltips ansehen. Mit einer Reihe neuer Funktionen in CSS3 ist es jetzt möglich, einen vergleichbaren schicken Tooltip nur mit CSS zu erstellen. Lass uns anfangen.

Verwenden von Hint.css

In diesem Beitrag werden wir es nicht von Grund auf neu erstellen. Wir werden Hint.css verwenden. Hint.css ist eine Sammlung von Klassen und Stilregeln, die es uns ermöglichen, einen einfachen Tooltip schneller zu erstellen. Fügen Sie einfach das Stylesheet zu Ihrem HTML-Dokument hinzu oder kopieren Sie alle Stilregeln in Ihr eigenes Stylesheet.

Umbrechen Sie jetzt in Ihrem Dokumenttext das Stück, das Sie mit einem Inline-Element einfügen möchten, z. B. mit einem Span- oder Ankerelement. Fügen Sie den Tooltip-Inhalt mit dem Attribut " data-hint .

 across the globe are filled with freelance contractors all tendering for a limited amount of jobs. Weil jedoch die freiberuflichen Marktplätze auf der ganzen Welt mit freiberuflichen Auftragnehmern besetzt sind, die alle für eine begrenzte Anzahl von Aufträgen ausstellen. 

Technisch ist das alles, was Sie benötigen. Wenn Sie Ihr Dokument im Browser in der Vorschau anzeigen und die Maus bewegen, sollte die QuickInfo angezeigt werden.

Dieser Tooltip wird mit einem Pseudoelement angezeigt und verwendet CSS3 Transition für die animierte Bewegung.

Gib es einen Hinweis

Sofern Sie nicht ein Ankerelement verwenden, das standardmäßig mit unterschiedlichen Stilen ausgestattet ist, gibt es keine Hinweise darauf, dass das jeweilige Wort eine QuickInfo zeigt, wie Sie sie im obigen Screenshot sehen, und daher sind die Benutzer höchstwahrscheinlich ahnungslos.

Aus Gründen der besseren Benutzerfreundlichkeit können wir einige zusätzliche Stile hinzufügen, um einen Indikator zu geben, zum Beispiel:

 span [Datenhinweis] {border-bottom: 1px dotted #aaa; } span [Datenhinweis]: Hover {Cursor: Zeiger; } 

Diese Stile geben dem span-Element mit dem data-hint einen gepunkteten Rahmen unten an. Sie können die Stile an Ihre Designanforderungen anpassen.

QuickInfo-Richtung

Wir können den Tooltip in vier verschiedenen Richtungen anzeigen: oben, unten, rechts und links unter Verwendung der bereitgestellten Klassen.

Links

 Marktplätze 

Recht

 Marktplätze 

oben

 Marktplätze 

Unterseite

 Marktplätze 

Oder zeigen Sie den Tooltip weiter an

 Marktplätze 

Letzter Gedanke

Mit erweiterten Eigenschaften in CSS3 sind wir heute nicht mehr nur auf JavaScript oder jQuery angewiesen, um eine ausgefallene Benutzeroberfläche zu erstellen, wie zum Beispiel einen Tooltip zu erstellen, und mit Hint.css können wir einen im Snap erstellen. Aber wie bereits in diesem Beitrag erwähnt, ermöglicht uns diese Technik nur die Erstellung eines einfachen textbasierten Tooltips .

Wenn Sie einen erweiterten Tooltip erstellen möchten, z. B. einen Tooltip mit Bild oder den Tooltip beim Mausklick anstatt mit der Maus zu zeigen, ist die Verwendung von JavaScript oder jQuery immer noch der bessere Weg.

CSS3-Animation - Erstellen eines Fan-Out mit Bounce-Effekt mit Bezier-Kurve

Wussten Sie, dass geometrische Transformationen, die HTML-Elementen mit der CSS- Transformationseigenschaft hinzugefügt wurden, wie z. B. Skalieren, Skew und Drehen, animiert werden können? ? Sie können mit der transition und den @keyframes Animationen animiert werden, aber was noch cooler ist, ist, dass animierte Transformationen durch die Verwendung der cubic-bezier() Timing-Funktion um einen kleinen Bounce-Effekt erweitert werden können.Zus

(Tech- und Design-Tipps)

Erstellen Sie einfach HTML5-Animationen mit HTML5Maker

Möchten Sie Leser mit animierten und interaktiven Inhalten anziehen ? Während dies früher die Domäne von Flash war - was zu einer Menge Ladezeit und möglichen Kompatibilitätsproblemen führte - wurde HTML5 schnell zur vorherrschenden Methode zum Erzeugen von animierten und interaktiven Webinhalten.Natürl

(Tech- und Design-Tipps)