Share
QuickInfos sind eine großartige Möglichkeit, eine Benutzeroberfläche zu verbessern, wenn Ihre Benutzer einen zusätzlichen Kontext für das ausgefallene Symbol benötigen oder wenn Sie eine Bestätigung für das Klicken auf eine Schaltfläche oder eine Ostereier-Beschriftung für ein Bild wünschen. Lassen Sie uns jetzt animierte Tooltips erstellen, die nur HTML und CSS enthalten.
Hier arbeiten wir an:
Bevor wir in den Kessel eintauchen, werfen wir einen Blick auf das, was wir gerade brauen. Das Hauptziel besteht darin, eine einfache Möglichkeit zum Hinzufügen eines Tooltips zur Verfügung zu haben. Dies wird durch Hinzufügen eines benutzerdefinierten Befehls erreicht Tooltip Attribut:
Accentsconagua
sichtbarer Text oder Symbol usw.Wenn Sie nach 508-kompatiblen Tooltips suchen oder intelligentere Tooltips mit Erkennung von Containerkollisionen und / oder Unterstützung für HTML-Inhalte im Vergleich zu reinem Text benötigen, gibt es viele Lösungen, die Drittanbieter-Scripts verwenden, um diese Anforderungen zu erfüllen.
„JavaScript ist unerlässlich, um vollständig zugängliche interaktive Komponenten zu erstellen.“ - Sara Soueidan, Einen vollständig zugänglichen Hilfetool erstellen… ist schwieriger als ich dachte
In diesem Lernprogramm wird nicht speziell auf die Erreichbarkeitsanforderungen eingegangen. Sie kennen Ihre Benutzer und wissen, was sie benötigen. Denken Sie also auch daran, dass sie ihre Bedürfnisse berücksichtigen.
Oh, Moment mal. Wir müssen zunächst mit einem Sternchen klarkommen, dass „keine zusätzlichen Markierungen erforderlich sind“. Das ist immerhin Magie. Unsere Tooltips nicht Ja wirklich Sie benötigen zusätzliche DOM-Elemente, da sie vollständig aus bestehen Pseudoelemente (die ::Vor und ::nach dem Dinge) die wir über CSS steuern können.
Wenn Sie bereits die Pseudo-Elemente eines Elements aus einem anderen Satz von Stilen verwenden und einen QuickInfo zu diesem Element wünschen, müssen Sie u. A umstrukturieren wenig bisschen.
Warten. Gremlins! Noch ein Vorbehalt: CSS-Positionierung. Damit die QuickInfos ordnungsgemäß funktionieren, muss das übergeordnete Element (das Objekt, an das die QuickInfo angehängt wird) sein
Position: relativ, oderPosition: absolut, oderPosition: feststehendGrundsätzlich gilt, etwas anderes als Position: statisch - Dies ist der voreingestellte Positionsmodus, der so ziemlich allen Elementen vom Browser zugewiesen wird. Die Tooltips sind absolut positioniert und müssen daher die Grenzen kennen, in denen ihre Absolutheit Bedeutung hat. Die Standardstellungsanweisung statisch deklariert keine eigenen Grenzen und gibt unseren Tooltips keinen Kontext, gegen den gedrückt werden soll. Daher verwenden die Tooltips das nächstgelegene Elternelement, das eine deklarierte Grenze hat.
Sie müssen entscheiden, welche Positionsanweisung am besten für die Verwendung der Tooltips geeignet ist. Dieses Tutorial setzt voraus Position: relativ für das übergeordnete Element. Wenn Ihre Benutzeroberfläche auf einem absolut positionierten Element basiert, ist möglicherweise auch eine Umstrukturierung (zusätzliches Markup) erforderlich, um einen Tooltip für dieses Element bereitzustellen.
Lass uns rein springen und sehen, was los ist.
Die meisten CSS-Regeln werden unter Berücksichtigung der Klassennamen geschrieben .dieses Ding, CSS hat jedoch eine Handvoll Auswahlarten. Unsere magischen Tooltipps verwenden Attributselektoren. Das ist die Notation in eckigen Klammern:
[foo] Hintergrund: rgba (0, 0, 0, 0,8); Farbe: #fff;
Wenn der Browser auf Folgendes trifft:
Hör zu!es wird wissen, dass es das anwenden muss [foo] Regeln dafür Tag hat ein Attribut namens foo. In diesem Fall hätte der Bereich selbst einen durchscheinend schwarzen Hintergrund mit weißem Text.
HTML-Elemente haben verschiedene integrierte Attribute, wir können jedoch auch eigene Attribute erstellen. Mögen foo, oder Tooltip. Standardmäßig weiß HTML nicht, was diese bedeuten, aber mit CSS können wir HTML mitteilen, was dies bedeutet.
Wir verwenden Attributselektoren hauptsächlich zur Trennung von Bedenken. Die Verwendung von Attributen über Klassennamen bringt uns keine Bonuspunkte in den Spezifitätskriegen. Klassen und Attribute haben die gleiche Spezifität. Durch die Verwendung von Attributen können wir jedoch den Inhalt des Inhalts beibehalten, da HTML-Attribute Werte enthalten können, während Klassennamen dies nicht tun.
Betrachten Sie den Klassennamen .Tooltip gegen das Attribut [Tooltip] In diesem Beispielcode. Der Klassenname ist einer der Werte für das Attribut [Klasse] während das Tooltip-Attribut hat ein Wert, der Text, den wir anzeigen möchten.
Lorem Ipsum Lorem Ipsum
Unsere Tooltipps verwenden zwei verschiedene Attribute:
Tooltip: Dies enthält den Inhalt des Tooltips (eine reine Textzeichenfolge).fließen: wahlweise; Auf diese Weise können wir steuern, wie der Tooltip angezeigt wird. Es gibt viele Platzierungen, die wir unterstützen könnten, aber wir werden vier allgemeine Platzierungen behandeln:Lassen Sie uns nun die Grundlagen für alle Tooltips einrichten. Die Regeln aus den Schritten 1 bis 5 gelten für alle Tooltips, unabhängig davon, was fließen wir geben Ihnen. Die Schritte 6-7 unterscheiden sich zwischen den verschiedenen fließen Werte.
Dies gilt für das übergeordnete Element des Tooltips. Weisen Sie eine Positionsanweisung zu, um die absolute Positionierung der Teile des Tooltips (die ::Vor und ::nach dem Pseudo-Elemente) werden im Kontext dieses übergeordneten Elements und nicht im Kontext der gesamten Seite oder eines Großelternelements oder eines anderen äußeren Elements in der DOM-Struktur positioniert.
[Tooltip] Position: relativ;
Es ist Zeit, die Pseudo-Elemente zu aktivieren. Hier setzen wir gemeinsame Eigenschaften für beide ::Vor und ::nach dem Stücke. Das Inhalt Diese Eigenschaft macht eigentlich ein Pseudo-Element, aber wir werden es bald schaffen.
[Tooltip] :: Vorher, [Tooltip] :: Nach Zeilenhöhe: 1; Benutzerauswahl: keine; Zeigerereignisse: keine; Position: absolut; Anzeige: keine; Deckkraft: 0; / * meinungen * / text-transform: keine; Schriftgröße: .9em;
Ich weiß nicht, warum "Dink" Sinn macht. Ich habe es immer so genannt. Dies ist der kleine dreieckige spitze Teil, der die Tooltips angibt Sprechblase Fühlen Sie sich, indem Sie auf das Ding zeigen, das es angerufen hat. Beachten Sie, dass wir verwenden transparent für die Randfarbe; Wir werden die Farbe später hinzufügen, da die Art, wie wir sie hinzufügen, von den QuickInfos abhängt fließen.
[Tooltip] :: before content: "; z-index: 1001; border: 5px solid transparent;
Es ist kein Tippfehler, dass die Inhalt:"; Deklaration hat eine leere Zeichenfolge für einen Wert. Wir wollen nichts drin, aber wir brauchen diese Eigenschaft, damit das Pseudoelement existiert.
Um ein Dreieck zu erstellen, definieren wir eine feste Umrandung mit einer gewissen Dicke auf einer leeren Box (ohne Inhalt) ohne Breite und Höhe und geben nur einer Seite der Box eine Umrandungsfarbe. Weitere Informationen finden Sie im folgenden Tutorial:
Hier ist das Fleisch der Sache. Beachten Sie die Inhalt: attr (Tooltip) Teil sagt: „Dieses Pseudoelement sollte den Wert von verwenden Tooltip Attribut als Inhalt. “Deshalb ist die Verwendung von Attributen über Klassennamen so großartig!
[Tooltip] :: after content: attr (Tooltip); /* Zauber! * / z-Index: 1000; / * Der Rest ist meistens Meinung * / font-family: Helvetica, serifenlos; Text ausrichten: Mitte; / * Lassen Sie den Inhalt die Größe der Tooltips festlegen, dies hindert sie jedoch auch daran, unangenehm zu sein * / min-width: 3em; Max-Breite: 21em; Leerraum: Nowrap; Überlauf versteckt; Textüberlauf: Ellipsen; / * sichtbares Design der Tooltip-Blasen * / Polsterung: 1ch 1.5ch; Grenzradius: .3ch; Box-Schatten: 0 1em 2em -.5em rgba (0, 0, 0, 0,35); Hintergrund: # 333; Farbe: #fff;
Beachten Sie die z-index Werte sowohl für den Dink als auch für die Blase. Dies sind willkürliche Werte, bedenken Sie jedoch, dass a z-index Wert ist relativ. Bedeutung: Ein Z-Index-Wert von 1001 innerhalb eines Elements mit einem Z-Index von 3 bedeutet nur, dass das 1001-Element das oberste Element ist Innerhalb Das z-Index: 3 Container.
Die Blase ist z-index sollte mindestens einen Schritt vom Dink entfernt sein z-index. Wenn er gleich oder höher als der Dink ist, kann dies zu einem inkonsistenten Farbeffekt des Dink führen, wenn in den Tooltips a verwendet wird Box Schatten.
Weitere Informationen zur z-index-Eigenschaft finden Sie in folgendem Lernprogramm:
Unsere Tooltips werden aktiviert, indem Sie den Mauszeiger mit dem Tooltip über das Element bewegen. Fast.
[Tooltip]: hover :: vor, [Tooltip]: hover :: nach display: block;
Wenn Sie sich unseren Stilblock in Schritt 2 ansehen, sollten Sie feststellen, dass wir ihn verwendet haben Deckkraft: 0; zusammen mit Anzeige: keine; für unsere Tooltip-Teile. Wir haben dies getan, damit wir CSS-Animationseffekte verwenden können, wenn die QuickInfos ein- und ausgeblendet werden.
Das Anzeige Eigenschaft kann nicht animiert werden, aber Opazität können! Wir werden uns zuletzt mit den Animationen beschäftigen. Wenn Sie sich nicht für animierte Tooltips interessieren, löschen Sie einfach die Deckkraft: 0; Deklaration von Schritt 2 und ignorieren Sie die Animation in Schritt 7.
Das Letzte, was wir noch für alle Tooltips benötigen, ist eine Möglichkeit, einen Tooltip zu unterdrücken, wenn er keinen Inhalt hat. Wenn Sie Tooltips mit einem dynamischen System füllen (Vue.js, Angular oder React, PHP usw.), möchten wir keine dummen leeren Blasen!
/ * keine leeren Tooltips anzeigen * / [tooltip = "] :: before, [tooltip ="] :: after display: none! important;
Dieser Schritt kann ziemlich kompliziert werden, da wir einige nicht so häufige Selektoren verwenden, um unseren Tooltips dabei zu helfen, mit ihren Platzierungen basierend auf ihren Platzierungen umzugehen fließen Werte (oder deren Fehlen).
"Beim Circle-K sind seltsame Dinge im Gange." - Ted Theodore Logan
Bevor wir in die Stile springen, werfen wir einen Blick auf einige Auswahlmuster, die wir verwenden.
[Tooltip]: nicht ([Flow]) :: vor, [Tooltip] [Flow ^ = "up"] :: vor / *… Eigenschaften: Werte… * /
Dies sagt dem Browser: „Für alle Elemente mit einem Tooltip Attribut das entweder unterlassen Sie haben eine fließen Attribut oder haben eine fließen mit einem Wert, der beginnt mit 'up': wendet diese Stile auf ihr an ::Vor Pseudoelement. "
Wir verwenden hier ein Muster, damit diese auf andere Flows erweitert werden können, ohne dass so viel CSS wiederholt werden muss. Dieses Muster flow ^ = "up" benutzt das ^ = (beginnt mit) matcher. Dadurch können die Stile auch angewendet werden aufrecht und oben links Wenn Sie diese Flusssteuerungen hinzufügen möchten. Wir werden diese hier nicht behandeln, aber Sie können sie in meiner ursprünglichen Tooltip-Demo auf CodePen sehen.
Hier sind die CSS-Blöcke für alle vier Flows, die in diesem Tutorial behandelt werden.
/ * NUR das :: before * / [tooltip]: nicht ([flow]) :: before, [tooltip] [flow ^ = "up"] :: vor bottom: 100%; Randbreite unten: 0; Rahmenfarbe: # 333; / * NUR das :: after * / [tooltip]: nicht ([flow]) :: after, [tooltip] [flow ^ = "up"] :: after bottom: calc (100% + 5px); / * Beide :: vor & :: after * / [tooltip]: nicht ([flow]) :: before, [tooltip]: nicht ([flow]) :: after, [tooltip] [flow ^ = "auf "] :: before, [tooltip] [flow ^ =" up "] :: after left: 50%; transform: translate (-50%, -.5em);
[tooltip] [flow ^ = "down"] :: vor top: 100%; Bordürenbreite: 0; Rahmenfarbe: # 333; [Tooltip] [Flow ^ = "down"] :: after top: calc (100% + 5px); [Tooltip] [Flow ^ = "down"] :: vor, [Tooltip] [Flow ^ = "down"] :: nach left: 50%; transform: translate (-50%, .5em);
[Tooltip] [Fluss ^ = "links"] :: vor oben: 50%; Randbreite rechts: 0; Rahmenfarbe links: # 333; links: calc (0em - 5px); transform: translate (-. 5em, -50%); [Tooltip] [Flow ^ = "left"] :: after top: 50%; rechts: berechnen (100% + 5px); transform: translate (-. 5em, -50%);
[Tooltip] [Fluss ^ = "rechts"] :: vor top: 50%; Rahmenbreite links: 0; Rahmenfarbe rechts: # 333; rechts: calc (0em - 5px); transform: translate (.5em, -50%); [Tooltip] [Fluss ^ = "rechts"] :: after top: 50%; links: berechnet (100% + 5px); transform: translate (.5em, -50%);
Animationen sind unglaublich. Animationen können:
Unsere Tooltipps werden in die letzte Beschreibung aufgenommen. Anstatt eine Textblase in die Existenz zu bringen und blitzartig hervorzuheben, lassen Sie uns diese machen weicher.
Wir brauchen zwei @keyframe Animationen. Die Aufwärts- / Abwärts-Tooltips verwenden die Tooltips-vert Keyframe und die linken / rechten QuickInfos verwenden die Tooltips-Horz Keyframe. Beachten Sie, dass in beiden Keyframes nur der gewünschte Endstatus der QuickInfos definiert wird. Wir müssen nicht wissen, woher sie kommen von (Die Tooltips selbst haben diese Stilinformationen). Wir wollen nur kontrollieren, wohin sie gehen zu.
@keyframes tooltips-vert to opacity: .9; transform: translate (-50%, 0); @keyframes tooltips-horz bis Deckkraft: .9; transform: translate (0, -50%);
Jetzt müssen wir diese Keyframes auf die QuickInfos anwenden, wenn ein Benutzer über die auslösenden Elemente (die Elemente mit dem Symbol) bewegt wird [Tooltip] Attribute). Da wir verschiedene Flows verwenden, um zu steuern, wie die Tooltips dargestellt werden, müssen wir diese Möglichkeiten in den Stilen identifizieren.
[Tooltip]: Nicht ([Fluss]): Hover :: Vorher, [Tooltip]: Nicht ([Flow]): Hover :: Nach, [Tooltip] [Fluss ^ = "Auf"]: Hover :: Vorher, [ Tooltip] [flow ^ = "up"]: hover :: after, [tooltip] [flow ^ = "down"]: hover :: vorher, [tooltip] [flow ^ = "down"]: hover :: after Animation: Tooltips-Vert 300ms nach vorne herausfahren; [Tooltip] [Fluss ^ = "links"]: schweben :: vor, [Tooltip] [Fluss ^ = "links"]: hover :: nach, [Tooltip] [Fluss ^ = "rechts"]: hover :: vor, [tooltip] [flow ^ = "right"]: hover :: after animation: tooltips-horz 300ms Nach vorne ausfahren;
Denken Sie daran, dass wir das nicht animieren können Anzeige Eigenschaft, aber wir können den Tooltips einen Einblendeffekt geben, indem Sie die Opazität. Wir animieren auch die Transformationseigenschaft, die den Tooltips eine subtile Bewegung verleiht, als ob sie einfliegen würden, um auf ihre auslösenden Elemente zu zeigen.
Beachten Sie die vorwärts Schlüsselwort in der Animationsdeklaration. Dadurch wird der Animation mitgeteilt, dass sie nicht zurückgesetzt wird, wenn sie abgeschlossen ist, sondern vorwärts und am Ende bleiben.
Fantastischer Job! Wir haben in diesem Tutorial viel behandelt und haben nun eine übersichtliche Sammlung von Tooltips für unsere harte Arbeit gezeigt:
Wir haben nur die Oberfläche dessen gekratzt, was mit CSS-Tooltips möglich ist. Viel Spaß dabei, mit ihnen zu spielen, experimentieren Sie weiter und stellen Sie Ihre eigenen Rezepte zusammen!
