{"id":253347,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/erstellen-eines-tooltips-mit-css\/"},"modified":"2022-12-23T11:15:00","modified_gmt":"2022-12-23T08:15:00","slug":"erstellen-eines-tooltips-mit-css","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/erstellen-eines-tooltips-mit-css\/","title":{"rendered":"Erstellen eines Tooltips mit CSS"},"content":{"rendered":"

\n Wahrscheinlich wissen Sie bereits, was ein Tooltip ist.\n<\/p>\n

\n Ein Tooltip ist ein Symbol oder Text, der uns, wenn er mit der Maus dar\u00fcber bewegt wird, weitere Informationen in einer Sprechblase oder einem Pop-up liefert.\n<\/p>\n

\n Normalerweise finden Sie QuickInfos in Formularen, aber Sie k\u00f6nnen sie \u00fcberall dort platzieren, wo Benutzer weitere Informationen ben\u00f6tigen.\n<\/p>\n

\n Im obigen Bild zeigt der Kreis mit dem Fragezeichen darin einen Tooltip<\/strong>. Wenn Sie den Mauszeiger dar\u00fcber bewegen, gibt dieser Tooltip weitere Informationen zu den Zeichentypen, die Ihr Passwort enthalten muss.\n<\/p>\n

\n Sie k\u00f6nnen Frameworks erhalten, um Tooltips in Ihre Website zu implementieren, aber meistens verwenden diese Frameworks JavaScript, um dies zu erreichen.\n<\/p>\n

\n In diesem Artikel lernen wir, wie man Tooltips auf relativ einfache Weise nur mit CSS erstellt.<\/strong>\n<\/p>\n

\n Bevor wir beginnen, ist die endg\u00fcltige HTML- und CSS-Datei zum Implementieren von QuickInfos am Ende dieses Blogs verf\u00fcgbar<\/strong>. Wir haben jedes einzelne Element, das in HTML und CSS verwendet wird, detailliert beschrieben, um den Tooltip so einfach wie m\u00f6glich zu implementieren.\n<\/p>\n

\n Sie k\u00f6nnen die Tooltip-Funktion auf jeder Website nur mit HTML und CSS implementieren, nachdem Sie diesen Artikel vollst\u00e4ndig durchgearbeitet haben.\n<\/p>\n

\n Also fangen wir an\u2026\n<\/p>\n

\n Wir beginnen mit der Erstellung einer einfachen HTML-Seite, die nach einem Passwort fragt.\n<\/p>\n

\n Schritt 1: Erstellen einer einfachen HTML-Seite zum Anzeigen von QuickInfos
\n<\/h5>\n

\n Hier ist der grundlegende HTML-Code f\u00fcr die Formularseite<\/strong> ,\n<\/p>\n

\n\n\n<\/code><\/pre>\n
<\/p>\n
\n<\/pre>\n
<br \/>\n  Awesome CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<p>\n  <code><strong>Wie Sie sehen k\u00f6nnen, haben wir unsere \u201e style.css<\/strong> \"-Datei im obigen HTML-Code verlinkt .<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Wir werden den Tooltip mit dieser CSS-Datei erstellen.<\/code>\n<\/p>\n<p>\n  <code>Wir verwenden ein <strong>einfaches Formular<\/strong>, um die Tooltip-Funktion auszuprobieren. Dieses Formular hat nur ein Feld mit der Bezeichnung \u201e <strong>Passwort<\/strong> \", da wir es nur zur Veranschaulichung der Funktionsweise der Tooltips verwenden.<\/code>\n<\/p>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> <\/pre>\n<p>\n  <code>Wir haben die Klasse \u201e <strong>tooltip<\/strong> \" verwendet, um die Tooltip-Funktion mithilfe von CSS zu implementieren. Dies werden wir im n\u00e4chsten Abschnitt besprechen.<\/code>\n<\/p>\n<h5>\n  <code>Schritt 2: Grundlegende CSS-Stile f\u00fcr unsere HTML-Seite<\/code><br \/>\n<\/h5>\n<p>\n  <code>Bevor wir das CSS f\u00fcr \u201eTooltip\" erstellen, m\u00fcssen wir einige <strong>grundlegende CSS-Stile f\u00fcr unsere HTML-Seite<\/strong> erstellen .<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Dies ergibt eine HTML-Seite mit sch\u00f6nem gr\u00fcnen Hintergrund. Wir haben auch verdana Schriftart und Schriftfarbe als Wei\u00df ausgew\u00e4hlt.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Wir haben das Formular \u201erelativ“ positioniert, mit einer maximalen Breite von 600 Pixel und einem Rand von 20 %.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  Die Formularetikettenklasse dient zum Festlegen der Schriftgr\u00f6\u00dfe und des Buchstabenabstands f\u00fcr den Etikettentext, den wir verwenden werden.\n<\/p>\n<pre><code>forminput{\nmargin: 0 10px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #444;\n}<\/code><\/pre>\n<p>\n  Hier haben wir die Stile f\u00fcr das Formularfeld. Dieser Stil ist nicht kompliziert. Wir haben einen <strong>angemessenen Rand<\/strong> und <strong>Abstand<\/strong> sowie <strong>die Angabe von Schriftgr\u00f6\u00dfe<\/strong> und <strong>-farbe<\/strong> f\u00fcr Formularfelder angegeben.\n<\/p>\n<p>\n  Das sind also unsere Standard-CSS-Stile f\u00fcr unsere Formularseite, die wir verwenden werden, um zu demonstrieren, wie die Tooltip-Funktion mit CSS implementiert wird.\n<\/p>\n<h3>\n  Lassen Sie uns einen Tooltip mit CSS erstellen<br \/>\n<\/h3>\n<h5>\n  Schritt 4: CSS-Stil f\u00fcr Tooltip<br \/>\n<\/h5>\n<p>\n  <strong>Sie haben vielleicht bemerkt, dass wir die Klasse \u201e Tooltip<\/strong> “ in unserer HTML-Datei verwendet haben. Dies ist der Stil, den wir f\u00fcr das Fragezeichen (\u201e?“) anwenden werden, das als Tooltip fungiert.\n<\/p>\n<pre><code>.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}<\/code><\/pre>\n<p>\n  Zun\u00e4chst m\u00fcssen wir den Tooltip relativ positionieren, indem wir \u201e <strong>position: relative;<\/strong> “ Stil. Der Grund f\u00fcr die relative Positionierung des Tooltips ist, dass wir sp\u00e4ter in dieser Methode <strong>Pseudoelemente verwenden werden, die \u201eabsolut“ positioniert werden k\u00f6nnen.<\/strong> Wir wollen also, dass diese Pseudoklassen \u201eabsolut“ relativ zu diesem Element positioniert sind.\n<\/p>\n<p>\n  Als n\u00e4chstes geben wir dem Tooltip mit der Methode rgba() eine <strong>schwarze Hintergrundfarbe ,<\/strong>\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  wobei r,g,b f\u00fcr Rot, Gr\u00fcn und Blau steht und a f\u00fcr ‚ <strong>Alpha<\/strong> ‚ steht, das <strong>die Deckkraft steuert<\/strong>.\n<\/p>\n<p>\n  <strong>Wir geben unserem Tooltip-Kreis einen schwarzen Hintergrund und reduzieren seine Deckkraft auf 0,3, damit er einer dunkelgr\u00fcnen Farbe<\/strong> \u00e4hnelt .\n<\/p>\n<p>\n  Als N\u00e4chstes wenden wir einige grundlegende Polsterungs- und Randradiusstile auf das Fragezeichen (\u201e?“) an, damit unser Tooltip gut aussieht.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Mit dem obigen CSS wenden wir Padding auf den Kreis an, der das \u201e?“ umschlie\u00dft, und stellen den Rahmenradius auf 100 % ein, um ihn zu einem vollst\u00e4ndigen Kreis zu machen.\n<\/p>\n<p>\n  Die Schriftgr\u00f6\u00dfe bestimmt die Gr\u00f6\u00dfe von \u201e?“ Zeichen, das wir in diesem Beispiel als Tooltip verwenden.\n<\/p>\n<p>\n  Wir f\u00fcgen auch \u201e <strong>cursor:help;<\/strong> “ im CSS, gibt dies ein Fragezeichen unter dem Mauszeiger aus, wenn Sie mit der Maus \u00fcber dieses Element fahren, wie in der Abbildung unten gezeigt.\n<\/p>\n<p>\n  Der Toot-Tipp enth\u00e4lt einige Inhalte (in diesem Beispiel geben wir weitere Informationen zu den Zeichen, die im Feld \u201ePasswort“ enthalten sein sollten).\n<\/p>\n<h5>\n  Schritt 5: Geben Sie den Inhalt f\u00fcr Tooltip in HTML ein<br \/>\n<\/h5>\n<p>\n  Die n\u00e4chste Herausforderung vor uns ist, wo dieser Inhalt in den Tooltip eingef\u00fcgt werden soll?\n<\/p>\n<p>\n  Um diese Aufgabe zu erf\u00fcllen, f\u00fcgen wir der zuvor erstellten HTML-Datei ein <strong>Attribut hinzu.<\/strong>\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Hier m\u00f6chten wir kein zus\u00e4tzliches Markup hinzuf\u00fcgen, wie z. B. das Erstellen einer weiteren Spanne, um den Inhalt in die QuickInfo einzuf\u00fcgen.\n<\/p>\n<p>\n  Wir k\u00f6nnen den Inhalt f\u00fcr den Tooltip innerhalb dieser Spanne einschlie\u00dfen.\n<\/p>\n<p>\n  Dazu f\u00fcgen wir ein Attribut \u201e <strong>data<\/strong> “ hinzu. Der Name des Datenattributs lautet hier \u201e <strong>Tooltip<\/strong> „.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> ist unser Datenattribut, mit dem wir den Inhalt hinzuf\u00fcgen, der im Tooltip angezeigt werden soll.\n<\/p>\n<p>\n  Als N\u00e4chstes f\u00fcgen wir die Anweisungen bez\u00fcglich des Zeichens, das im Passwort vorhanden sein sollte, in unser data-tooltip-Attribut ein.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Jetzt haben wir <strong>den Text hinzugef\u00fcgt<\/strong>, der im Tooltip erscheinen soll. Als N\u00e4chstes lernen wir, wie <strong>dieser Text im Tooltip angezeigt wird<\/strong>, wenn Benutzer mit der Maus \u00fcber das Fragezeichen fahren.\n<\/p>\n<h5>\n  Schritt 6: Tooltip-Container mit Pseudo-Elementen erstellen<br \/>\n<\/h5>\n<p>\n  Zuerst m\u00fcssen wir die Container erstellen, in denen der Inhalt des Tooltips angezeigt werden soll.\n<\/p>\n<p>\n  Kehren wir dazu zur Datei style.css zur\u00fcck und erstellen <strong>Pseudoelemente<\/strong> f\u00fcr die Klasse <strong>.tooltip<\/strong>.\n<\/p>\n<p>\n  Wir werden Pseudoklassen <strong>::after<\/strong> und <strong>::before erstellen, um den Inhalt unseres Tooltip erscheinen zu lassen.<\/strong>\n<\/p>\n<p>\n  Grunds\u00e4tzlich k\u00f6nnen Sie mit einer Pseudoklasse wie \u201e <strong>::after<\/strong> “ eine Position direkt nach dem Element anvisieren, das die Hauptklasse verwendet, und diese Position formatieren.\n<\/p>\n<p>\n  In \u00e4hnlicher Weise k\u00f6nnen Sie mit der Pseudoklasse ::before die Position direkt vor dem Element formatieren, in dem die Hauptklasse verwendet wird (in diesem Fall ist \u201e?“ dieses Element).\n<\/p>\n<p>\n  Es ist eine sehr n\u00fctzliche Pseudoklasse, um zus\u00e4tzlichen Inhalt auf einer Seite einzuf\u00fcgen.\n<\/p>\n<p>\n  Wir werden eine Pseudo-Klasse f\u00fcr \u201eTootlip“ erstellen, wie unten gezeigt.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Wir erstellen eine gemeinsame Klasse f\u00fcr ::before und ::after Styles.\n<\/p>\n<p>\n  Hier haben wir sowohl ::before- als auch ::after-Stile <strong>absolut positioniert, weil wir m\u00f6chten, dass sie \u00fcber dem \u201eFragezeichen“ positioniert werden und wir m\u00f6chten, dass sie \u00fcber \u201e?“ zentriert sind.<\/strong>\n<\/p>\n<p>\n  Um den Tooltip \u00fcber dem \u201e?“ zu zentrieren wir m\u00fcssen das \u201e <strong>left:50%;<\/strong> “ Attribut.\n<\/p>\n<p>\n  <strong>Jetzt werden wir ::before<\/strong> verwenden, um das kleine Dreieck unten in unserem Tooltip zu gestalten.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Das <strong>::after<\/strong> wird verwendet, um den Inhalt im Tooltip zu formatieren.\n<\/p>\n<p>\n  Mal sehen, wie es gemacht wird.\n<\/p>\n<p>\n  Zuerst erstellen wir das kleine Dreieck am unteren Rand des Tooltips.\n<\/p>\n<pre><code>.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}<\/code><\/pre>\n<p>\n  <strong>Wir sollten Inhalt<\/strong> verwenden :““; -Attribut, um anzuzeigen, dass dieses Element keinen Inhalt hat. <strong>Da wir einige leere Inhalte<\/strong> eingef\u00fcgt haben, k\u00f6nnen wir sie jetzt stylen.\n<\/p>\n<p>\n  Wir k\u00f6nnen <strong>Dreiecke in CSS<\/strong> mit dem Attribut <strong>border-width<\/strong> erstellen .\n<\/p>\n<p>\n  Durch diese Zeile,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Wir haben festgelegt, dass die Rahmenbreite nach oben 10 Pixel, nach rechts 8 Pixel, nach unten 0 Pixel und nach links 8 Pixel betr\u00e4gt.\n<\/p>\n<p>\n  Dadurch entsteht f\u00fcr uns ein Dreieck.\n<\/p>\n<p>\n  Als N\u00e4chstes erstellen wir einen <strong>durchgehenden Rahmen<\/strong> f\u00fcr diesen Abschnitt und <strong>machen den rechten, unteren und linken Bereich transparent<\/strong>, sodass nur der obere \u201eDreieck“-Bereich zu sehen ist.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Nachdem wir den Rand solide gemacht haben, wenden wir Farben f\u00fcr die obere, rechte, untere und linke Seite des Randes an.\n<\/p>\n<p>\n  Wir sollten dasselbe verwenden “ <strong>border-color:rgba();<\/strong> „-Attribut hier, das wir f\u00fcr die Gestaltung des Kreises um das Fragezeichen verwendet haben.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Hier haben wir <strong>schwarze Farbe<\/strong> (0,0,0) f\u00fcr den <strong>oberen Teil<\/strong> des Rahmens gegeben und <strong>seine Deckkraft auf 0,3 reduziert<\/strong>, um uns eine dunkelgr\u00fcne Farbe zu geben, genau wie wir es getan haben, um den Stil f\u00fcr den Kreis um das \u201e?“ zu erhalten.\n<\/p>\n<p>\n  Wir haben die <strong>rechten, unteren und linken<\/strong> Teile der Umrandung ausgeblendet, indem wir die <strong>transparent<\/strong> gemacht haben .\n<\/p>\n<p>\n  Selbst wenn wir die rechte und linke Grenze erstellt h\u00e4tten, sind sie transparent. Der einzige Rand mit Farbe ist der obere Rand. Was dies bewirken wird, ist, dass der <strong>verborgene Rand links und rechts uns in Verbindung mit dem farbigen oberen Rand einen Dreieckseffekt verleiht<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Das Endergebnis wird so aussehen.\n<\/p>\n<p>\n  Wenn Sie eine Google-Suche nach \u201ei“ durchf\u00fchren, erfahren Sie mehr dar\u00fcber.\n<\/p>\n<p>\n  Die Attribute \u201e <strong>Rand links<\/strong> “ und \u201e <strong>oben<\/strong> “ werden verwendet, um dieses Dreieck zentriert \u00fcber dem Kreis zu positionieren.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Jetzt <strong>haben wir den dreieckigen Schwanz<\/strong> unten in unserem Tooltip erstellt, der auf das \u201e?“ zeigt. Schild.\n<\/p>\n<p>\n  Als N\u00e4chstes m\u00fcssen wir den abgerundeten rechteckigen Bereich des Tooltips gestalten, in dem die Informationen angezeigt werden. Dazu verwenden wir das Attribut <strong>::after<\/strong>.\n<\/p>\n<pre><code>.tooltip::after{\ncontent: \"some text\";\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}<\/code><\/pre>\n<p>\n  Daher habe ich verwendet,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Im Er\u00f6ffnungsabschnitt der Pseudoklasse <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Jetzt m\u00fcssen wir diesem Abschnitt die <strong>gleiche Hintergrundfarbe<\/strong> geben, die wir zum Erstellen der Dreiecksregion verwendet haben (die schwarz ist, mit einer Alpha\/Opazit\u00e4t von 0,3).\n<\/p>\n<p>\n  Also habe ich hinzugef\u00fcgt,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Dann habe ich diesen Abschnitt wie zuvor mit unserem \u201eFragezeichen“ zentriert. Ich verwende eine Breite von 300 px f\u00fcr das abgerundete Rechteck und einen Rand von -150 px, um es in Bezug auf das Fragezeichen zu zentrieren.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Jetzt geben wir Polsterung und runden die Kanten des Rechtecks \u200b\u200bab (indem wir den Randradius anwenden).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Dadurch wird auch die Textfarbe innerhalb des abgerundeten Rechtecks \u200b\u200bauf Wei\u00df (#fff) gesetzt.\n<\/p>\n<p>\n  Jetzt ist der abgerundete Rechteckbereich fertig, der den Inhalt anzeigt. Aber noch ist es <strong>nicht richtig positioniert<\/strong>. Die aktuelle HTML-Seite sieht wie unten gezeigt aus.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  <strong>Grunds\u00e4tzlich \u00fcberlagert<\/strong> das abgerundete Rechteck den von uns erstellten \u201eDreieck“-Bereich, da sowohl ::before als auch ::after den gleichen Rand verwenden und 20 Pixel \u00fcber dem Fragezeichen platziert sind.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Wir m\u00fcssen <strong>das abgerundete Rechteck direkt \u00fcber den dreieckigen Abschnitt bringen, den wir zuvor erstellt haben, damit beide zusammen als<\/strong> <strong>Chat-Box<\/strong> erscheinen .\n<\/p>\n<p>\n  Wir wissen nicht, wie hoch die genaue H\u00f6he des abgerundeten Rechtecks \u200b\u200bist, um es direkt \u00fcber dem Dreieck zu platzieren. Wir wollen die <strong>100%ige H\u00f6he des abgerundeten Rechtecks \u200b\u200bvertikal transformieren,<\/strong> sodass es direkt \u00fcber dem Dreieck platziert wird.\n<\/p>\n<p>\n  Da diese beiden Elemente (Dreieck und abgerundetes Rechteck) verwendet werden, <code>top: -20px;<\/code>m\u00fcssen wir nur <strong>die Oberseite des abgerundeten Rechtecks \u200b\u200bvertikal auf eine Pixelh\u00f6he transformieren, die<\/strong> gleich seiner eigenen H\u00f6he ist.\n<\/p>\n<p>\n  Dazu verwenden wir,<code>transform: translateY(-100%);<\/code>\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Jetzt haben wir eine richtige Struktur, die wie eine Informationsbox aussieht.\n<\/p>\n<h5>\n  Schritt 7: Abrufen der tats\u00e4chlichen Informationen im Tooltip<br \/>\n<\/h5>\n<p>\n  Unsere letzte Herausforderung hier besteht darin, den richtigen Inhalt, der mehr Informationen enth\u00e4lt, in den Tooltip zu bekommen.\n<\/p>\n<p>\n  Denken Sie daran, dass wir den Inhalt, der im Tooltip erscheinen sollte, in unserer HTML-Datei platziert hatten.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Mit CSS k\u00f6nnen wir ein Attribut aus einem HTML-Element abrufen. Wir machen das mit <strong>attr()<\/strong> im <strong>.tooltip::after<\/strong> Pseudo-CSS.\n<\/p>\n<p>\n  Also statt<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Wir werden verwenden<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Hier ist \u201e <strong>data-tooltip<\/strong> “ unser HTML-Attribut.\n<\/p>\n<p>\n  Mit dem Attribut, das wir f\u00fcr den Inhalt in HTML angegeben haben, k\u00f6nnen wir diesen Inhalt aufrufen und in unserem Pseudo-CSS anzeigen. Das Ergebnis davon wird wie unten gezeigt sein,\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Jetzt. Alles, was wir tun m\u00fcssen, ist, unseren Tooltip am Anfang unsichtbar zu machen und nur dann anzuzeigen, wenn die Benutzer mit der Maus \u00fcber das Fragezeichen (?) -Zeichen fahren.\n<\/p>\n<p>\n  Dies ist sehr einfach.\n<\/p>\n<p>\n  Um den Tooltip zu Beginn unsichtbar zu machen, <strong>machen wir seine Deckkraft<\/strong> im folgenden Pseudo-CSS, das wir zuvor geschrieben haben, auf \u201e0″.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  F\u00fcr den Hover-Effekt f\u00fcgen wir am Ende unserer style.css-Datei ein neues Pseudo-CSS hinzu. Lassen Sie uns <strong>die Deckkraft f\u00fcr den Hover-Zustand auf \u201e1″ setzen,<\/strong> sodass der Tooltip nur beim Hover angezeigt wird.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Dieses Pseudo-CSS bestimmt nur den schwebenden Zustand, da wir \u201e:hover“ nach dem Haupt-CSS .tooltip verwendet haben\n<\/p>\n<p>\n  Jetzt ist unser CSS-Tooltip fertig.\n<\/p>\n<p>\n  Aber der \u00dcbergang des Tooltips wird nicht so glatt sein, wie Sie es erwarten w\u00fcrden.\n<\/p>\n<p>\n  Sie k\u00f6nnen die \u00dcbergangseffekte mit CSS noch besser gestalten. Dazu m\u00fcssen Sie nur die folgende \u00dcbergangsregel in CSS f\u00fcr ::before und ::after Pseudoklassen hinzuf\u00fcgen.\n<\/p>\n<p>\n  Um mehr \u00fcber \u00dcbergangsstile zu erfahren, die mit CSS erstellt werden k\u00f6nnen, lesen Sie unseren Artikel \u201e <a href=\"https:\/\/inform.click\/de\/erwecken-sie-ihre-webseiten-mit-css-animationen-und-uebergaengen-zum-leben\/\" title=\"CSS-Animationen und \u00dcberg\u00e4nge\">CSS-Animationen und \u00dcberg\u00e4nge<\/a> „.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Dieser Prozess ist viel einfacher und weniger kompliziert im Vergleich zur Implementierung von Tooltips mit JavaScript.\n<\/p>\n<p>\n  Suchen Sie als Referenz die endg\u00fcltige HTML- und CSS-Datei, um dies zu \u00fcben.\n<\/p>\n<h4>\n  Endg\u00fcltige HTML-Datei zum Testen des Tooltips<br \/>\n<\/h4>\n<pre><code>\n\n\n<\/code><\/pre>\n<p><meta charset=\"utf-8\" \/><\/p>\n<pre>\n<\/pre>\n<p><title><br \/>\n  CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<h4>\n  <code>Endg\u00fcltige CSS-Datei, die einen Tooltip erstellt<\/code><br \/>\n<\/h4>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}\n \nform{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}\n \nformlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}\n \nforminput{\nmargin: 010px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #fff;\n}\n \n\/* --------- Tooltip Styles ---------- *\/\n \n.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}\n.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\ntransition: allease0.3s;\n}\n.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}\n.tooltip::after{\ncontent: attr(data-tooltip);\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}\n \n\/* Hover states *\/\n \n.tooltip:hover::before, .tooltip:hover::after{\nopacity: 1;\n}<\/code><\/code><\/pre>\n<h3>\n  Live-Demo<br \/>\n<\/h3>\n<p>\n  Sehen Sie sich den <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">Live-CSS-Tooltip<\/a> in Aktion an.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Aufnahmequelle: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/11\/create-tooltip-using-css\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wahrscheinlich wissen Sie bereits, was ein Tooltip ist. Ein Tooltip ist ein Symbol oder Text, der uns, wenn er mit der Maus dar\u00fcber bewegt wird, weitere Informationen in einer Sprechblase oder einem Pop-up liefert. Normalerweise finden Sie QuickInfos in Formularen, aber Sie k\u00f6nnen sie \u00fcberall dort platzieren, wo Benutzer weitere Informationen ben\u00f6tigen. Im obigen Bild zeigt der Kreis mit dem Fragezeichen darin einen Tooltip. Wenn Sie den Mauszeiger dar\u00fcber bewegen, gibt dieser Tooltip weitere Informationen zu den Zeichentypen, die Ihr Passwort enthalten muss. Sie k\u00f6nnen Frameworks erhalten, um Tooltips in Ihre Website zu implementieren, aber meistens verwenden diese Frameworks JavaScript, um dies zu erreichen. In diesem \u2026<\/p>\n","protected":false},"author":1,"featured_media":223378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[68,55,120],"tags":[],"class_list":["post-253347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-3","category-web-und-wordpress","category-web-tools"],"_links":{"self":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/comments?post=253347"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media?parent=253347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/categories?post=253347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/tags?post=253347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}