Share
Wir haben kürzlich ein Tutorial zur Erstellung skriptfreier CSS3-Tooltips veröffentlicht. Heute veröffentlichen wir eine Skript-erweiterte Version, die SEO-freundlich ist und ein wenig jQuery-Zauber verwendet hat, um sie zur Mausposition zu animieren!
QuickInfos werden verwendet, um zusätzliche Informationen anzuzeigen, wenn ein Link mit der Maus verbunden ist. Wenn wir Links auf unserer Website erstellen, ist es immer eine gute Praxis, den Links Titel zum Nutzen von SEO hinzuzufügen. Diese Titel werden angezeigt, wenn Sie den Mauszeiger über einen Link bewegen, es fehlt jedoch jegliches Branding oder benutzerdefiniertes Styling. In diesem Tutorial werde ich Sie durch folgende Schritte führen:
Auf diese Weise verbessern wir die Benutzererfahrung und halten gleichzeitig alles für Suchmaschinen und SEO-Vorteile sauber und sauber.
Beginnen wir mit dem Hinzufügen des Markups in der Kopf unseres Dokuments. Wir haben zwei Stylesheets hinzugefügt:
"style.css" und "tooltips.css". Sie können die letztere entfernen, wenn Sie Ihre eigene Arbeit implementieren möchten, aber wir werden sie in der Demo verwenden. Das Stylesheet
"style.css" enthält alle CSS-Stile, die unsere Tooltips formatieren. Wir haben auch die JQuery-Javascript-Bibliotheksreferenz hinzugefügt. Hier ist unser Markenkopf für Dokumente.
Link-Tooltips mit CSS3 und JQuery
Jetzt müssen wir das Markup für die Links mit Tooltips hinzufügen. Bei meinem Ansatz, Links zur Anzeige von QuickInfos zu erstellen, müssen wir einen Link mit Klassenattribut hinzufügen
"tooltip_link". Dadurch wird die grundlegende QuickInfo formatiert, und wir fügen einen zusätzlichen Klassennamen hinzu
"links", "Center" oder "Recht" um die Position des Tooltip-Pfeils festzulegen, der links unten, in der Mitte oder rechts ausgerichtet ist. Zum Schluss fügen wir noch einige hinzu Titel zu den anzuzeigenden Links. Hier nun das Links-Markup.
Tooltip links Tooltip-Mitte Tooltip rechts
Jetzt müssen wir bestimmen, wie das Tooltip-Markup aussehen wird, damit wir unsere Stile und Codierungen darauf aufbauen können. Wir werden ein Basic verwenden
"div" Tag mit dem Klassenattribut von "Tooltip" und einer dieser Klassennamen
"links", "Center" oder "Recht". Darin werden wir den Text des Tooltips einfügen. Hier nun das Tooltip-Markup.
Ein Tooltip-Text
Zuerst gestalten wir den Link selbst, indem wir seine Position auf setzen "relativ" So können wir den Tooltip relativ zum Link positionieren.
a.tooltip_link position: relativ! wichtig;
Jetzt müssen wir den CSS-Stil für die grundlegende QuickInfo hinzufügen, für die der Klassenname verwendet wird
"Tooltip". Wir müssen den Tooltip ausblenden, damit er mit JQuery angezeigt werden kann, wenn der Link im Hover-Modus ist. Setzen Sie die Position auf
"absolut" So können wir die Position relativ zum Link selbst setzen, width auf
200px, ein 5px Polsterung, ein unterer Rand von
12px Um Platz für den Pfeil zu schaffen, setzen Sie die Textfarbe auf Weiß, Z-Index bis
100 über allen Inhalten stehen, 100% Setzen Sie die Hintergrundfarbe von unten auf
transparent blaue Farbe mit einigen Schriftarten und Textstilen.
Denken Sie daran, dass Sie das Styling beliebig ändern können. Die Demo verwendet zur Vereinfachung absichtlich einfache visuelle Stile.
.Tooltip Anzeige: keine; Position: absolut! wichtig; Breite: 200px; Hintergrund: rgba (61,102,143,0,9); Polsterung: 5px; Marge: 0 0 12px 0; Farbe: #fff; z-Index: 100; Boden: 100%; Text ausrichten: Mitte; Schriftdicke: fett; Schriftgröße: 11px;
Fügen Sie den allgemeinen Stil für den Tooltip-Pfeil mithilfe von Puesdo-Elementen hinzu
"nach dem" und "Vor". Wir gestalten den "nach dem" puesdo -Element, das den vollständigen Pfeil von links und rechts sowie die Hälfte des Pfeils in der mittleren QuickInfo bildet, indem festgelegt wird, dass es keinen Inhalt, keine absolute Position und keine Rahmenfarbe enthält
"-14px" von der Unterseite des Tooltips. Das "Vor" puesdo -Element hat fast den gleichen Stil wie das
"nach dem" Puesdo-Element.
.Tooltip: nach content: ""; Position: absolut! wichtig; unten: -14px; z-Index: 100; Grenze: 0 festes rgba (61,102,143,0,9); Rand unten: 14px durchsichtig transparent; Breite: 100%; .tooltip: before content: ""; Position: absolut! wichtig; Grenze: 0 festes rgba (61,102,143,0,9); unten: -14px; z-Index: 100;
Um den Tooltip mit dem linken Pfeil zu gestalten, verwenden wir "links" In der Klasse formatieren wir die Klasse mit einem Randradius von allen Ecken, mit Ausnahme der unten links. Dann formatieren wir den linken Rand und die Position von ganz links für das Puesdo-Element "after". Für den Rechtspfeil ändern wir einfach den Grenzradius, setzen den rechten Rand und positionieren ihn von rechts. Mit dem mittleren Pfeil-Tooltip setzen wir den Randradius für alle Ecken. Jetzt müssen wir beide formatieren
"nach dem" und "Vor" Puesdo-Elemente. Das
"nach dem" puesdo -Element hat einen linken Rand mit 50% der Breite und
50% von links die "Vor" Das puesdo-Element hat einen rechten Rand und einen transparenten unteren Rand mit
50% der Breite und 50% von rechts.
.tooltip.left Rahmenradius: 5px 5px 5px 0; .tooltip.left: after border-left-width: 14px; links: 0; .tooltip.right border-radius: 5px 5px 0 5px; .tooltip.right: after border-right-width: 14px; rechts: 0; .tooltip.center border-radius: 5px; .tooltip.center: after border-left-width: 10px; Breite: 50%; links: 50%; .tooltip.center: before border-right-width: 10px; Rand unten: 14px durchsichtig transparent; Breite: 50%; rechts: 50%;
Um die gewünschte Funktionalität zu erhalten, müssen Sie unseren JQuery-Code vor dem schließenden body-Tag in ein Skript-Tag einfügen. Wir werden Mausereignisse verwenden, um die Funktionalität zu bestimmen, die wir erstellen möchten.
Das "mouseenter" Das Ereignis wird ausgelöst, wenn der Mauszeiger in einen Teil des betreffenden Elements eintritt, in diesem Fall das
"ein" oder Linkelement funktioniert dies nur, wenn der Link im title-Attribut mehr als null Zeichen enthält. Hier müssen wir Folgendes tun:
Accentsconagua
$ ("a"). mouseenter (Funktion (e) // Ereignis, das ausgelöst wird, wenn der Mauszeiger "ein" Element eingibt var $ class_name = $ (this) .attr ("class"). slice (13); // get Klassenattribut von "a" -Element nach Hinterlassen von 13 Zeichen, das gleich "tooltip_link" ist var $ x = e.pageX - this.offsetLeft; // Abrufen der Maus-X-Koordinate relativ zu "a" -Element var $ tooltip_text = $ (this) .attr ("title"); // get title-Attribut eines "a" -Elements erhalten if ($ tooltip_text.length> 0) // Nur Tooltip anzeigen, wenn es mehr als null Zeichen $ (this) .append (''+ $ tooltip_text +''); // Tooltip-Markup anhängen, Klassennamen und Tooltip-Titel aus den Werten über $ einfügen ("a> div.tooltip.center"). css ("left", "" + $ x - 103 + "px"); // Tooltip-Position von links setzen $ ("a> div.tooltip.left"). css ("left", "" + $ x + "px"); // Tooltip-Position von links setzen $ ("a> div.tooltip.right"). css ("left", "" + $ x - 208 + "px"); // Setze Tooltip-Position von links $ ("a> div.tooltip." + $ class_name) .fadeIn (300); // Anzeige, Animation und Einblenden des Tooltips); Das "mouseleave" Das Ereignis wird ausgelöst, wenn der Mauszeiger den Cursor verlässt
"ein" oder Linkelement. In diesem Attribut werden wir alles, was wir getan haben, einfach umkehren
"mouseenter" Veranstaltung. Wir erhalten den Klassennamen-Attributsteil aus dem Link. Dann blenden wir den Tooltip aus, der die Anzeigeeigenschaft auf setzt
"keiner" und Animationsdauer von verwenden 300 ms, dann müssen wir die nächsten Funktionen für verschieben
300 ms bis die Ausblende-Animation beendet ist. Um das Tooltip-Markup zu entfernen, müssen wir es in eine benutzerdefinierte Warteschlange einfügen und dann die Warteschlange mit beenden
"dequeue" Funktion, mit der die Hauptwarteschlange weiterlaufen kann.
$ ("a"). mouseleave (function () // Ereignis, das ausgelöst wird, wenn der Mauszeiger "ein" Element "var" zurückgibt) $ class_name = $ (this) .attr ("class"). slice (13); // get class Attribut von "a" -Element nach Hinterlassen von 13 Zeichen, gleich "tooltip_link" // Ausblenden des Tooltips, Verzögerung um 300ms, Entfernen des Tooltips und Beenden der benutzerdefinierten Warteschlange $ ("a> div.tooltip.") + $ class_name ) .fadeOut (300) .delay (300) .queue (function () $ (this) .remove (); $ (this) .dequeue ();;); Das Endergebnis sollte jetzt wie in der Abbildung unten aussehen. Damit Ihr Endergebnis genau wie unsere Demo aussieht, sollten Sie die darin enthaltenen Stile verwenden
"tut.css", Sie können jedoch Ihre eigenen Einstellungen hinzufügen.
Ich hoffe, dass Sie alle einige Techniken aus unserem CSS- und JQuery-Tutorial gelernt haben! Teilen Sie Ihre Gedanken unten mit :)
