de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

A / B Testergebnisse und Fallstudien für User Experience Design

A / B Testergebnisse und Fallstudien für User Experience Design

Der Prozess der Split-Tests ist nicht so kompliziert, wie Sie vielleicht denken. Sie erzielen ein bestimmtes Ziel, indem Sie beispielsweise mehr Besucher auf eine andere Unterseite bringen oder mehr Anmeldungen generieren. Anschließend erstellen Sie verschiedene Änderungen an der Webseite und verfolgen Analysen, für welche Version eine bessere Leistung erzielt wird. D

(Tech- und Design-Tipps)

Synchronisieren Sie webbasierte Präsentationsfolien mit Impress.js und Impressr [Quicktip]

Synchronisieren Sie webbasierte Präsentationsfolien mit Impress.js und Impressr [Quicktip]

Ich habe an einigen Universitäten und Schulen Vorträge über Web-Entwicklung und WordPress gehalten und ein häufiges Problem, dem ich während einer Präsentation gegenüberstehe, ist, dass das Publikum in der Nähe des Publikums meine Dias kaum sehen kann. Ich denke darüber nach: Wie kann ich die Präsentationsfolien übersichtlicher gestalten, aber den Redner und die Teilnehmer auf der gleichen Seite halten?Ich habe e

(Tech- und Design-Tipps)