Reine CSS-Implementierung (kein Skript). HTML-Imperativ-Tooltip-Text-Eingabeaufforderungseffekt

Analysieren Sie den Ausführungsprozess, um festzustellen, ob der Knoten vorhanden ist, um die Tooltip -Implementierung (Klassenname, Attribute usw.) zu aktivieren Blasen, um von anderen zu lernen.

Werfen wir zunächst einen Blick auf den Tooltip-Stil von element-ui

Offensichtlich wird die Position der Blase durch Javascript-Skript hinzugefügt

Lassen Sie uns ohne weiteres einige Erwartungen festlegen. Für die reine CSS- Implementierung sind keine neuen Elemente erforderlich** (Verwendung von After- und Before-Pseudoelementen)** Keine Notwendigkeit für den Klassennamenabgleich, sondern direkte Verwendung von Attributselektoren. ([attr])** Unterstützt den Standardstil** (wenn das Tag das Thema und die Position nicht definiert)** Imperativ** (definieren Sie es direkt im Tag und überlassen Sie es dann CSS zum Abgleichen)** Verwenden Sie Sass um das Thema und die Position der Blase zu implementieren Präprozessorentwicklung (Studenten, die es nicht verstehen, können es in CSS konvertieren) Spezifikation der HTML-Definitionsdirektive

 <button tooltip='Ich bin eine Content-Ente' effect='light'placement='top-left'>Oben links</button> 

• Tooltip – der von der Blase angezeigte Inhalt;
• Effekt – das Thema der Blase (dunkel/hell), standardmäßig dunkel;
• Platzierung – die Position der Blase relativ zum übergeordneten Element (oben / oben links / oben rechts / rechts / rechts oben / rechts unten ...), Standardeinstellung oben;

Schreiben Sie zunächst ein paar Schaltflächen

Stilreferenz element-ui

 <div class=container> <div class=top> <button Tooltip=Top Placement=Top-Left Effect=Light>Oben links</Button> <Button Tooltip=Top Left Top Left Placement=Top>Top</Button> < button tooltip=top-right Placement=top-right>top-right</button> </div> <div class=left> <button tooltip=oben links oben links oben links oben links oben links oben links oben links oben links oben links oben links Platzierung=links-oben>links oben</button> <button tooltip=links Platzierung=links Effekt=Licht>links</button> < button tooltip=linke und rechte Platzierung=left-bottom >Unten links</button> </div> <div class=right> <button tooltip=oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts Platzierung=rechts-oben>oben rechts</button> <button tooltip=rechts Platzierung=rechts Effekt=Licht>rechts</button> < Button Tooltip=right Lower Placement=Right-Bottom>Unten rechts</Button> </div> <div class=bottom> <Button Tooltip=Bottom Left Bottom Left Placement=bottom-left>Unten links</Button> <Button tooltip=unten Platzierung=unten Effekt=Licht>unten</button> <button tooltip=unten rechts Platzierung=bottom-right>unten rechts</button> </div></div>

Hover überwacht die Ein- und Auswärtsbewegung der Maus, **[Tooltip]** gleicht Beschriftungen mit diesem Attribut ab, dahinter ist eine Blase und davor ist ein Dreieck

 /* Elemente mit dem Tooltip-Attribut abgleichen */[tooltip] { position: relative; /* Standardstil von Blasen*/ &::after { display: none content: attr(tooltip) /* Standardstil von Dreiecken* / & ::before { display: none; content: '' } /* Bewegen Sie die Maus in das Element, um Blasen und Dreiecke anzuzeigen */ &:hover { &::after { display: block } &::before { Anzeige: Block } }}

Jetzt wird der Effekt wirksam, nachdem Sie die Maus hineinbewegt haben

Um den Effekt leicht zu erkennen, kann der Test Blasen und Dreiecke standardmäßig blockieren.

 /* Standardstil für Blasen*/&::after { display: block; content: attr(tooltip);}/* Standardstil für Dreiecke*/&::before { display: block;

Der aktuelle Effekt ist wie folgt

Die Kerndarstellung ist selbstverständlich auf absolute Positionierung eingestellt

 /* Bubble-Standardstil */&::after { display: block; Breite: 200px; Randradius: 4px; Boxschatten: 0 10px 20px -5px rgba(0, 0, 0, 0,4); z-index: 100; @extend .tooltip-theme-dark; /* Standardthema übernehmen (weißer Text auf schwarzem Hintergrund) */&::before { display: block; content: ''; border: 5px solid transparent; */}

Der aktuelle Effekt ist wie folgt

Definieren Sie jeweils zwei Themen

 $white: #fff;$black: #313131;/* Bubble theme*/.tooltip-theme-dark { color: $white; background-color: $black;}.tooltip-theme-light { color: $black; Hintergrundfarbe: $white; Rand: 1px einfarbig $schwarz;}/* Dreiecksthema*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black; /* Vorerst dasselbe wie Dark*/}

 /* Blasenposition*//*----Top----*/.tooltip-placement-top { unten: calc(100% + 10px); left: 50%; );}.tooltip-placement-top-right { unten: calc(100% + 10px); left: 100%, 0)}.tooltip-placement-top-left { unten: calc(100% + 10px); transform: translator(0, 0)}/* Dreiecksposition*//*----top-- --*/.triangle-placement-top { bottom: calc(100% + 5px); left: 50%; transform: translator(-50%, 0);}.triangle-placement-top-left { unten: calc(100% + 5px); links: 10px;}.triangle-placement-top-right { unten: calc(100% + 5px;}

Dies ist auch der Kerncode. Verwenden Sie die Attributauswahl, um den Wert auf dem Etikett abzugleichen, und legen Sie dann verschiedene Stile fest.

Passende Blasen, Dreiecksthemen

 &[effect=light] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light }}

Passen Sie Blasen- und Dreieckspositionen an, 12 Positionen

 @each $placement in oben,oben-rechts,oben-links,rechts,rechts-oben,rechts-unten,unten,unten-rechts,unten-links,links,links-oben,links-unten { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement} };

Wenn das Etikett kein Platzierungsattribut hat / leer ist, wird standardmäßig die oberste Position übernommen.

 &:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top }}

Der aktuelle Effekt ist wie folgt

Machen wir den Text länger und fügen wir display:none zu den Standardstilen für Blasen und Dreiecke hinzu.

Unterteilt in vier Richtungen, nach oben, unten, links und rechts, vier Animationen

 @keyframes anime-top { from { opacity: .5; unten: 150 % }}@keyframes anime-bottom { from { top: 150 % }} .5; rechts: 150 %; }}@keyframes anime-right { from { opacity: .5;

Passen Sie die Blasenposition an, um zu bestimmen, welche Animation ausgeführt werden soll. Verwenden Sie beispielsweise **[attr^=]**, um die Position oben links und oben rechts anzupassen.

 /* Animation festlegen*/@each $placement oben, rechts, unten, links { &[placement^=#{$placement}] { &::after, &::before { Animation: anime-#{$placement} 300 ms Ease-Out vorwärts; } }}

Der Endeffekt ist wie folgt

Im Anhang ist die Codepen-Adresse codepen.io/anon/pen/yR…

Das Obige ist der vom Herausgeber eingeführte HTML-Tooltip-Text-Eingabeaufforderungseffekt für die reine CSS-Implementierung. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Zeit. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!