Analysez le processus d'exécution. Déplacez la souris dans le nœud pour détecter si le nœud existe pour activer l'implémentation de l'info-bulle (nom de la classe, attributs, etc.). Détectez le sujet et l'emplacement (nom de la classe, attributs, etc.). des bulles pour apprendre des autres.
Jetons d'abord un coup d'œil au style d'info-bulle d'element-ui
Évidemment, la position de la bulle est ajoutée via un script javascript
Sans plus tarder, définissons quelques attentes. Aucun script JavaScript n'est nécessaire. L'implémentation de CSS pur ne nécessite pas l'ajout de nouveaux éléments** (en utilisant des pseudo-éléments après et avant)** Pas besoin de correspondance de nom de classe, en utilisant directement des sélecteurs d'attribut**. ([attr ])** Prend en charge le style par défaut** (lorsque la balise ne définit pas le thème et la position)** Impératif** (définissez-le directement dans la balise, puis laissez-le au CSS pour la correspondance)** Utilisez sass pour implémenter le thème et la position de la bulle Développement du préprocesseur (les étudiants qui ne comprennent pas peuvent le convertir en CSS ) spécification de la directive de définition HTML
déclaration impérative<button tooltip='Je suis un canard content' effect='light' placement='top-left'>En haut à gauche</button>
Écrivez d'abord quelques boutons
Élément de référence de style-ui
<div class=container> <div class=top> <button tooltip=top placement=top-left effect=light>en haut à gauche</button> <button tooltip=top left top left placement=top>top</button> < bouton tooltip=top-right placement=top-right>haut-droit</button> </div> <div class=left> <button tooltip=en haut à gauche en haut à gauche en haut à gauche en haut à gauche en haut à gauche en haut à gauche en haut à gauche en haut à gauche en haut à gauche placement=left-top>gauche en haut</button> <button tooltip=left placement=left effect=light>left</button> < bouton tooltip=gauche et droite placement=left-bottom >En bas à gauche</button> </div> <div class=right> <button tooltip=en haut à droite en haut à droite en haut à droite en haut à droite en haut à droite en haut à droite en haut à droite en haut à droite en haut à droite placement=right-top>en haut à droite</button> <button tooltip=right placement=right effect=light>right</button> < bouton tooltip=droit inférieur placement=droit-bottom> En bas à droite</button> </div> <div class=bottom> <button tooltip=en bas à gauche en bas à gauche placement=bottom-left>en bas à gauche</button> <button tooltip=bottom placement=bottom effect=light>bas</button> <button tooltip=bottom right placement=bottom-right>en bas à droite</button> </div></div>Implémentation de la logique du code de base CSS
le survol surveille les mouvements de la souris vers l'intérieur et l'extérieur, **[tooltip]** fait correspondre les étiquettes avec cet attribut, après est une bulle et avant est un triangle
/* Faire correspondre les éléments avec l'attribut tooltip */[tooltip] { position: relative; /* Style par défaut des bulles*/ &::after { display: none; attr(tooltip); / & ::before { display: none; content: ''; } /* Déplacez la souris dans l'élément pour afficher les bulles et les triangles */ &:hover { &::after { display: block } &::before { affichage : bloc ; }}Désormais, l'effet sera efficace après avoir déplacé la souris dedans
Afin de voir facilement l'effet, le test peut bloquer par défaut les bulles et les triangles.
/* Style par défaut des bulles*/&::after { display: block; content: attr(tooltip);}/* Style par défaut des triangles*/&::before { display: block; content: '';}L'effet actuel est le suivant
L'affichage principal est bien sûr réglé sur le positionnement absolu
/* Style par défaut de la bulle */&::after { display: block; padding: 8px 15px; largeur : 200 px ; rayon de bordure : 4 px ; ombre de la boîte : 0 10 px 20 px -5 px rgba (0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* Hériter du thème par défaut (texte blanc sur fond noir) */ }/* Style par défaut du triangle */&::before { display: block; content : ''; position : absolue ; bordure : 5px solid transparent ; z-index : 100 ; @extend .triangle-theme-dark /* Hériter du thème par défaut (fond noir) */}L'effet actuel est le suivant
Définir deux thèmes chacun
$blanc : #fff;$noir : #313131;/* Thème de bulle*/.tooltip-theme-dark { couleur : $blanc ; couleur d'arrière-plan : $noir;}.tooltip-theme-light { couleur : $noir ; couleur d'arrière-plan : $blanc ; bordure : 1px solide $noir;}/* thème triangulaire*/.triangle-theme-dark { border-top-color : $noir;}.triangle-theme-light { border-top-color : $black; /* Identique à dark pour l'instant*/} Personnalisez les positions des bulles et des triangles (un seul exemple dans une direction) /* Position de la bulle*//*----Top----*/.tooltip-placement-top { bottom: calc(100% + 10px left: 50%; transform: translation(-50%, 0); );}.tooltip-placement-top-right { bottom: calc(100% + 10px left: 100%; transformer(-100%); 0)}.tooltip-placement-top-left { bottom: calc(100% + 10px left: 0; transform: translation(0, 0)}/* position du triangle*//*----top-- --*/.triangle-placement-top { bas : calc(100 % + 5px gauche : 50 % ; transformer : traduire(-50 %, 0);}.triangle-placement-top-left { en bas : calc(100 % + 5 px à gauche : 10 px ;}.triangle-placement-top-right { en bas : calc(100 % + 5 px à droite : 10 px) ; Lieu de capture, sujetIl s'agit également du code principal. Utilisez le sélecteur d'attribut pour faire correspondre la valeur sur l'étiquette, puis définissez différents styles.
Bulles assorties, thèmes triangulaires
&[effect=light] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light }}Faites correspondre les positions des bulles et des triangles, 12 positions
@each $placement en haut, en haut à droite, en haut à gauche, à droite, en haut à droite, en bas à droite, en bas, en bas à droite, en bas à gauche, à gauche, en haut à gauche, en bas à gauche { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement} } }};Si l'étiquette n'a pas d'attribut de placement / est vide, la première position sera héritée par défaut.
&:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top }}L'effet actuel est le suivant
Rallongeons le texte et ajoutons display:none aux styles par défaut des bulles et des triangles.
Divisé en quatre directions, haut, bas, gauche et droite, quatre animations
@keyframes anime-top { de { opacité : 0,5 ; bas : 150 % ; }}@keyframes anime-bottom { de { opacité : 0,5 ; haut : 150 % ; }}@keyframes anime-left { de { opacité : .5 ; droite : 150 % ; }}@keyframes anime-right { de { opacité : .5 ;Faites correspondre la position de la bulle pour déterminer quelle animation exécuter. Utilisez **[attr^=]** pour sélectionner. Par exemple, le coin supérieur gauche et le coin supérieur droit peuvent également être mis en correspondance.
/* Définir l'animation*/@each $placement en haut, à droite, en bas, à gauche { &[placement^=#{$placement}] { &::after, &::before { animation: anime-#{$placement} 300 ms de relâchement vers l'avant ; } }}L'effet final est le suivant
Ci-joint l'adresse du codepen codepen.io/anon/pen/yR…
RésumerCe qui précède est l'effet d'invite de texte d'info-bulle de la directive HTML pure (sans script) introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra dans. temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !