Cet article illustrera l'info-bulle en utilisant du JavaScript simple.
Comment créer une info-bulle JavaScript simple ?
Pour créer une info-bulle à l'aide de JavaScript, utilisez le ' survol de la souris ' et ' mouseout ' événements. Suivez les exemples ci-dessous pour une meilleure compréhension.
Exemple 1 : Info-bulle utilisant JavaScript
Dans l'exemple donné, nous allons créer une info-bulle en JavaScript pur et également styliser l'info-bulle en utilisant le ' style ' attribut.
Tout d'abord, créez un texte dans lequel nous souhaitons afficher une info-bulle sur l'événement mouseover :
< identifiant h5 = 'texte' > Linux h5 >
Obtenez le texte où l'info-bulle apparaîtra en utilisant le ' getElementById() ' méthode:
où lh = document. getElementById ( 'texte' ) ;
Maintenant, appelez le ' addEventListener() ” méthode en passant le “ survol de la souris ” événement et une fonction () comme paramètre. Dans la fonction définie, nous allons d'abord créer une info-bulle en créant un ' div ', définissez le texte qui sera affiché au survol et définissez un style de l'info-bulle à l'aide de l'élément ' style ' attribut. Enfin, ajoutez l'info-bulle en utilisant le ' ajouterEnfant() ' méthode:
lh. addEventListener ( 'passer la souris' , fonction ( ) {était une info-bulle = document. créerÉlément ( 'div' ) ;
info-bulle. innerHTML = 'Un meilleur site Web pour acquérir des compétences' ;
info-bulle. style . visibilité = 'visible' ;
info-bulle. style . position = 'absolu' ;
info-bulle. style . Couleur de l'arrière plan = 'rgb(107, 101, 101)' ;
info-bulle. style . rembourrage = '5px' ;
info-bulle. style . borderRadius = '3px' ;
info-bulle. style . couleur = 'blanc' ;
info-bulle. style . gauche = 'cinquante%' ;
info-bulle. style . largeur = '200px' ;
document. corps . ajouterEnfant ( info-bulle ) ;
} ) ;
Ici, utilisez le ' mouseout ' événement qui supprimera l'info-bulle pendant que le curseur s'éloignera du texte :
lh. addEventListener ( 'souris dehors' , fonction ( ) {
document. corps . supprimerEnfant ( info-bulle ) ;
} ) ;
Sortir
Exemple 2 : Info-bulle utilisant JavaScript avec CSS
Vous pouvez également créer une info-bulle en JavaScript avec CSS.
Pour ce faire, créez une zone pour afficher le texte de l'info-bulle à l'aide de la balise et attribuez un identifiant ' #myTooltip ” :
< identifiant de plage = 'moninfo-bulle' > portée >Obtenez les références du texte et de l'info-bulle à l'aide du ' getElementById() ' méthode:
où lh = document. getElementById ( 'texte' ) ;était une info-bulle = document. getElementById ( 'moninfo-bulle' ) ;
Appelez l'info-bulle sur le ' survol de la souris ” événement en définissant le texte dans la fonction à l'aide de la touche “ innerHTML ' propriété:
lh. addEventListener ( 'passer la souris' , fonction ( ) {info-bulle. style . visibilité = 'visible' ;
info-bulle. innerHTML = 'Un meilleur site Web pour acquérir des compétences' ;
} ) ;
Masquez l'info-bulle sur le ' mouseout ” événement en réglant le “ visibilité 'propriété à' caché ” :
lh. addEventListener ( 'souris dehors' , fonction ( ) {info-bulle. style . visibilité = 'caché' ;
} ) ;
Créer un identifiant ' #myTooltip ” dans la feuille de style qui stylisera l'info-bulle :
#myTooltip {visibilité : caché ;
largeur : 200px ;
Avec - indice : 1 ;
arrière-plan - couleur : RVB ( 107 , 101 , 101 ) ;
texte - aligner : centre ;
couleur : blanc ;
rembourrage : 5px 0 ;
frontière - rayon : 3px ;
gauche : cinquante % ;
}
Comme vous pouvez le constater, l'info-bulle a été implémentée avec succès sur le texte :
Comment créer une info-bulle en utilisant HTML et CSS ?
Vous pouvez également créer une info-bulle sans JavaScript. Dans le fichier HTML, créez le texte ' Linux ', où l'info-bulle sera affichée en survolant celle-ci. Créez un élément pour définir le texte de l'info-bulle dans la balise titre/texte :
Linux
< portée classe = 'texte d'info-bulle' >
Une plateforme pour acquérir des compétences
portée >
h5 >
Dans la feuille de style, créez une classe ou un id qui sera affecté aux éléments HTML. Ici, nous allons créer une classe ' info-bulle » qui est affecté à la rubrique :
. info-bulle {position : relatif ;
afficher : en ligne - bloc ;
}
Définir une classe ' texte d'info-bulle ' pour styliser le texte de l'info-bulle et lui attribuer le code HTML ' ' étiqueter:
. texte d'info-bulle {visibilité : caché ;
largeur : 150px ;
arrière-plan - couleur : RVB ( 107 , 101 , 101 ) ;
couleur : #fff ;
texte - aligner : centre ;
rembourrage : 5px 0 ;
frontière - rayon : 3px ;
position : absolu ;
Avec - indice : 1 ;
bas : 125 % ;
gauche : cinquante % ;
marge - gauche : - 60px ;
opacité : 0 ;
transition : opacité 0.3s ;
}
Ensemble ' flotter ' effet avec le ' info-bulle ” classe pour afficher l'info-bulle sur l'effet de survol :
. info-bulle : planer. texte d'info-bulle {visibilité : visible ;
opacité : 1 ;
}
Sortir
Nous avons compilé toutes les instructions nécessaires relatives à l'info-bulle JavaScript simple.
Conclusion
Pour créer une info-bulle à l'aide de JavaScript, utilisez le ' survol de la souris ' et ' mouseout ', qui affiche l'info-bulle au survol de l'élément et la masque lorsque l'événement mouseout est déclenché. Pour styliser l'info-bulle, utilisez le ' style ” attribut en JavaScript. Dans cet article, nous avons présenté les meilleurs exemples possibles de création d'une info-bulle à l'aide de JavaScript simple, de JavaScript avec CSS et d'une info-bulle sans JavaScript.