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.

20 wunderschöne Space Themed Web Designs für Ihre Inspiration

Nichts kommt der faszinierenden Schönheit des Raumes nahe . All diese Planeten, Sterne, Satelliten und Raketen sind die Attribute des Raumes, den wir so sehr lieben. Dank der technologischen Fortschritte auf dem Gebiet kann jeder Weltraumenthusiast jetzt den Nachthimmel erkunden, indem er einfach nur am Computer sitzt .

(Tech- und Design-Tipps)

Die 101 auf den Milliardären der Welt [Infografik]

Wie viele Milliardäre kennen Sie neben Mark Zuckerberg und Bill Gates? Weißt du wer der reichste Milliardär in Asien ist, oder die reichste Frau Milliardär in der Welt? In welchem ​​Land leben die meisten Milliardäre und in welcher Branche haben sie ihr Glück gemacht?Holen Sie sich die 101 zum Weltmilliardärsclub in dieser interessanten Infografik von Exceptional Villas Barbados . Aus diese

(Tech- und Design-Tipps)