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 Ostereierbeschriftung für ein Bild wünschen. Lassen Sie uns jetzt animierte Tooltips erstellen, die nur aus HTML und CSS bestehen.

Demo

Hier arbeiten wir an:

Bevor wir in den Kessel eintauchen, werfen wir einen Blick auf das, was wir tatsächlich brauen. Das Hauptziel besteht darin, eine einfache Möglichkeit zum Hinzufügen von QuickInfos zur Verfügung zu haben. Dazu wird ein benutzerdefiniertes tooltip-Attribut hinzugefügt:

<span tooltip="message">visible text or icon, etc.</span>

Ein Hinweis zu Barrierefreiheit und Funktionen

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 Skripts von Drittanbietern verwenden, um diese Anforderungen zu erfüllen.

„JavaScript ist für die Erstellung vollständig zugänglicher interaktiver Komponenten unerlässlich.“ - Sara Soueidan, Erstellen eines vollständig zugänglichen Hilfetooltips ... ist schwieriger als ich dachte

In diesem Lernprogramm wird nicht auf die Erreichbarkeitsanforderungen eingegangen. Sie kennen Ihre Benutzer und wissen, was sie brauchen. Denken Sie also auch daran, dass sie ihre Bedürfnisse berücksichtigen.

Lassen Sie uns einige Erwartungen festlegen

• Kein JavaScript erforderlich
• Wir werden Attributselektoren (keine Klassennamen) mit integriertem CSS-Musterabgleich verwenden
• Hinzufügen zu vorhandenen DOM-Elementen (keine neuen Elemente in Ihrem Markup erforderlich *)
• Codebeispiele sind frei von Präfixen (fügen Sie ggf. Herstellerpräfixe für Ihre Zielbrowser hinzu).
• Übernimmt das Mouseover / Hover, um QuickInfos auszulösen
• Nur-Text-Tooltips (HTML, Bilder usw. werden nicht unterstützt)
• Dezente Animationen beim Aufrufen von Tooltips

In Ordung! Lass uns dieses Boot rocken!

Oh, Moment mal. Wir müssen zunächst mit einem Sternchen klarkommen, dass „keine zusätzlichen Markierungen erforderlich sind“. Das ist doch Magie.  Unsere Tooltips benötigen keine zusätzlichen DOM-Elemente, da sie vollständig aus Pseudo-Elementen bestehen (Vor- ::before und ::after), die wir über CSS steuern können.

Wenn Sie bereits die Pseudoelemente eines Elements aus einem anderen Satz von Stilen verwenden und einen QuickInfo zu diesem Element benötigen, müssen Sie möglicherweise ein wenig umstrukturieren.

Keine Party wie eine Tooltip-Party!

Warten. Gremlins! Ein weiterer Nachteil: CSS-Positionierung. Damit die QuickInfos ordnungsgemäß funktionieren, muss das übergeordnete Element (das Objekt, an das die QuickInfo angehängt wird) sein

• position: relative, oder
• position: absolute, oder
• position: fixed

Im Grunde nichts anderes als position: static - dies ist der Standardpositionsmodus, 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 Standardposition-Direktive static 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 über eine deklarierte Grenze verfügt.

Sie müssen entscheiden, welche Positionsanweisung am besten für die Verwendung der QuickInfos geeignet ist. Dieses Tutorial nimmt position: relative für das übergeordnete Element an.  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 einsteigen und sehen, was los ist.

Attribut-Selektoren; Ein Quick Refresher

Die meisten CSS-Regeln werden mit Blick auf Klassennamen geschrieben, wie .this-thing, aber CSS hat eine Handvoll Auswahltypen. Unsere magischen Tooltips verwenden Attributselektoren - das ist die Notation in eckigen Klammern:

[foo] {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

Wenn der Browser auf Folgendes trifft:

<span foo>Check it out!</span>

Es wird wissen, dass es die Regeln [foo] anwenden muss, da das <span>-Tag ein Attribut mit dem Namen foo hat. 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. Wie foo oder tooltip. Standardmäßig weiß HTML nicht, was diese bedeuten, aber mit CSS können wir HTML mitteilen, was dies bedeutet.

Warum Attributselektoren?

Wir werden Attributselektoren hauptsächlich zur Trennung von Bedenken verwenden. 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 im Vergleich zum Attribut [tooltip] in diesem Beispielcode. Der Klassenname ist einer der Werte für das Attribut [class], während das Tooltip-Attribut einen Wert hat, der anzuzeigende Text ist.

<span class="tooltip another-classname">lorem ipsum</span>

<span tooltip="sit dolar amet">lorem ipsum</span>

Eingabe des Tooltips Alchemie

Unsere Tooltips verwenden zwei verschiedene Attribute:

• tooltip: Dieser enthält den Inhalt des Tooltips (eine einfache Textzeichenfolge).
• flow: optional; 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 abdecken:
  hoch, links, rechts, runter.

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, welchen Fluss wir ihnen geben. Die Schritte 6–7 unterscheiden zwischen den verschiedenen Durchflowwerten.

1. Relativität

Dies ist für das übergeordnete Element des Tooltips. Weisen Sie eine Positionsanweisung zu, damit die absolute Positionierung der Tooltip-Teile (die Pseudoelemente ::before und ::after) im Kontext dieses übergeordneten Elements und nicht im Kontext der Seite at-large oder eines Großelternelements oder eines anderen Elements positioniert wird anderes äußeres Element im DOM-Baum.

[tooltip] {
  position: relative;
}

2. Pseudoelement-Hauptzeit

Es ist Zeit, die Pseudo-Elemente zu grundieren. Hier legen wir gemeinsame Eigenschaften für die ::before und ::after Stücke fest. Die content seigenschaft bewirkt, dass ein Pseudoelement tatsächlich funktioniert, aber wir werden es bald schaffen.

[tooltip]::before,
[tooltip]::after {
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;

    /* opinions */
    text-transform: none; 
    font-size: .9em;
}

3. Der Dink

Ich weiß nicht, warum "dink" sinnvoll ist, ich habe es immer so genannt. Dies ist der kleine dreieckige spitze Teil, der den Tooltips ihre Sprechblase fühlt, indem sie auf das Ding zeigt, das sie aufgerufen hat.  Beachten Sie, dass wir für die Rahmenfarbe transparent verwenden. Wir fügen die Farbe später hinzu, da die Art und Weise, wie wir sie hinzufügen, vom Tooltip-flow abhängt.

[tooltip]::before {
    content: '';
    z-index: 1001;
    border: 5px solid transparent;
}

Es ist kein Tippfehler, dass der content: ''; 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 Rahmenfarbe. Weitere Informationen finden Sie im folgenden Tutorial:

• CSS
  Schneller Tipp: Zeichnen und Verwenden von CSS-Dreiecken
  Joren Van Hee

4. Blasen!

Hier ist das Fleisch der Sache. Beachten Sie den content: attr (tooltip) -Teil: "Dieses Pseudoelement sollte den Wert des tooltip-Attributs als Inhalt verwenden." Deshalb ist die Verwendung von Attributen über Klassennamen so großartig!

[tooltip]::after {
    content: attr(tooltip); /* magic! */
    z-index: 1000;
    
    /* most of the rest of this is opinion */
    font-family: Helvetica, sans-serif;
    text-align: center;
    
    /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* visible design of the tooltip bubbles */
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
}

Beachten Sie die z-Index-Werte für Dink und Bubble. Dies sind willkürliche Werte, bedenken Sie jedoch, dass ein z-Indexwert relativ ist.  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 in diesem z-index: 3-Container ist.

Der z-index der Blase sollte mindestens einen Schritt vom z-Index des Dink entfernt sein. Wenn er gleich oder höher als der Dink ist, kann dies zu einem inkonsistenten Farbeffekt des Dink führen, wenn die Tooltips einen box-shadow verwenden.

Weitere Informationen zur z-index-Eigenschaft finden Sie in folgendem Tutorial:

• CSS
  Was Sie möglicherweise nicht über die Z-Index-Eigenschaft wissen
  Steven Bradley

5. Interaktion Aktion

Unsere Tooltips werden aktiviert, indem Sie den Mauszeiger mit dem Tooltip über das Element bewegen ... Fast.

[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

Wenn Sie sich unseren Stilblock in Schritt 2 ansehen, sollten Sie feststellen, dass wir Deckkraft verwendet opacity: 0; zusammen mit display: none; für unsere Tooltip-Teile. Wir haben dies getan, damit wir CSS-Animationseffekte verwenden können, wenn die QuickInfos ein- und ausgeblendet werden.

Die display kann nicht animiert werden, die opacity jedoch! Wir beschäftigen uns zuletzt mit den Animationen. Wenn Sie sich nicht für animierte QuickInfos interessieren, löschen Sie einfach die opacity: 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!

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

6. Flusskontrolle

Dieser Schritt kann ziemlich kompliziert werden, da wir einige nicht so übliche Selektoren verwenden, um unseren Tooltips zu helfen, mit ihren Platzierungen basierend auf ihren flow werten (oder deren Fehlen) umzugehen.

"Beim Circle-K geht es seltsam zu." - Ted Theodore Logan

Bevor wir in die Stile springen, werfen wir einen Blick auf einige Auswahlmuster, die wir verwenden werden.

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    /* ...
    properties: values
    ... */
}

Dies sagt dem Browser: "Für alle Elemente mit einem tooltip-Attribut, die entweder kein flow-Attribut haben oder einen flow mit einem Wert haben, der mit "Up":  Wenden Sie diese Stile auf ::before vor dem Pseudo-Element an."

Wir verwenden hier ein Muster, sodass diese auf andere Flows ausgedehnt werden können, ohne dass so viel CSS wiederholt werden muss. Dieser Muster flow^="up" verwendet den Matcher ^= (beginnt mit).  Auf diese Weise können die Stile auch für up-right und up-left gelten, wenn Sie diese Flusssteuerelemente hinzufügen möchten. Wir werden diese hier nicht behandeln, aber Sie können sie in meiner ursprünglichen Tooltip-Demo von CodePen sehen.

Hier sind die CSS-Blöcke für alle vier Flows, die in diesem Lernprogramm behandelt werden.

Up (Standard):

/* ONLY the ::before */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}

/* ONLY the ::after */
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

/* Both ::before & ::after */
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

Nieder:

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

Links:

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

Recht:

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

7. Alle Dinge animieren

Animationen sind unglaublich. Animationen können:

• helfen Benutzer, sich wohl zu fühlen
• Helfen Sie Benutzern mit der räumlichen Wahrnehmung Ihrer Benutzeroberfläche
• Aufmerksamkeit auf Dinge zu lenken, die gesehen werden müssen
• Erweichen Elemente einer Benutzeroberfläche, die sonst ein binärer Ein / Aus-Effekt wären

Unsere Tooltipps werden in die letzte Beschreibung aufgenommen. Anstatt eine Textblase in die Existenz zu bringen und blitzartig hervorzuheben, lassen wir sie weicher werden.

@keyframes

Wir benötigen zwei @keyframe-Animationen. In den Aufwärts- / Abwärts-Tooltips wird der Keyframe tooltips-vert verwendet, und in den Tooltips links / rechts wird der Keyframe tooltips-horz verwendet.  Beachten Sie, dass in beiden Keyframes nur der gewünschte Endstatus der QuickInfos definiert wird. Wir müssen nicht wissen, woher sie kommen (die Tooltips selbst haben diese Stilinformationen). Wir wollen nur kontrollieren, wohin sie gehen.

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

Jetzt müssen wir diese Keyframes auf die QuickInfos anwenden, wenn ein Benutzer über den auslösenden Elementen (den Elementen mit den Attributen [tooltip]) steht. Da wir verschiedene Flows verwenden, um zu steuern, wie die Tooltips dargestellt werden, müssen wir diese Möglichkeiten in den Stilen identifizieren.

Verwenden Sie :hover, um die Kontrolle an Animationen zu übergeben

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: 
        tooltips-vert 
        300ms 
        ease-out
        forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: 
        tooltips-horz 
        300ms 
        ease-out 
        forwards;
}

Denken Sie daran, dass wir die display schaft nicht animieren können, aber wir können den Tooltips einen Einblendeffekt zuweisen, indem Sie die opacity bearbeiten. 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 das Schlüsselwort forwards 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.

Fazit

Fantastischer Job! Wir haben in diesem Tutorial viel behandelt und haben nun eine übersichtliche Sammlung von Tooltipps für unsere harte Arbeit gezeigt:

Wir haben nur die Oberfläche dessen gekratzt, was mit CSS-Tooltips möglich ist. Viel Spaß mit ihnen zu spielen, experimentieren Sie weiter und bereiten Sie Ihre eigenen Rezepte zu!

Weitere CSS-Benutzeroberflächen-Tutorials

• Schneller Tipp: Einfache CSS3-Checkboxen und Optionsfelder
• CSS-Shapes auf die nächste Stufe bringen
  
• Lösen von Problemen mit dem CSS-Grid und der Flexbox: Die Karten-Benutzeroberfläche
  
• Erste Schritte mit der Webanimation