Info-bulle javascript simple

Une info-bulle est une petite fenêtre contextuelle d'information qui s'affiche lorsqu'un utilisateur plane sur un élément, comme un bouton ou un texte. Plus précisément, le but d'une info-bulle est de fournir des informations supplémentaires ou des clarifications sur l'élément en question.

Cet article démontrera l'influence à l'aide de JavaScript Plain.

Comment créer une infraction JavaScript simple?

Pour créer une info-bulle à l'aide de JavaScript, utilisez le «souris" et "souris" événements. Suivez les exemples donnés ci-dessous pour une meilleure compréhension.

Exemple 1: info-bulle à l'aide de JavaScript

Dans l'exemple donné, nous créerons une info-bulle en JavaScript pur et styliser également l'influence à l'aide du «style" attribut.

Tout d'abord, créez un texte où nous voulons afficher une info-bulle sur l'événement Mouseover:

Linuxhint

Obtenez le texte où l'info-bulle apparaît en utilisant le «getElementByid ()" méthode:

var lh = document.getElementById ("texte");

Maintenant, appelez le «addEventListener ()«Méthode en passant le«souris”Événement et une fonction () en tant que paramètre. Dans la fonction définie, nous allons d'abord créer une infraction en créant un «div”Element, définissez le texte qui sera affiché sur le plan de volant et définissez un style de l'influence à l'aide du"style" attribut. Enfin, ajoutez l'influence à l'aide du «APPENDCHILD ()" méthode:

LH.addEventListener ("Mouseover", function ()
var tool infodip = document.CreateElement ("div");
infraction.innerhtml = "un meilleur site Web pour apprendre les compétences";
infraction.style.Visibilité = "Visible";
infraction.style.position = "absolu";
infraction.style.backgroundColor = "rgb (107, 101, 101)";
infraction.style.padding = "5px";
infraction.style.borderradius = "3px";
infraction.style.color = "blanc";
infraction.style.Left = "50%";
infraction.style.width = "200px";
document.corps.APPEDCHILD (ITTIP);
);

Ici, utilisez le «souris”Événement qui supprimera l'info-bulle pendant que le curseur sera éloigné du texte:

LH.addEventListener ("Mouseout", function ()
document.corps.RemoveChild (Info-toal);
);

Sortir

Exemple 2: info-bulle à l'aide de 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 ID "#mytooltip»:

= "mytooltip">

Obtenez les références du texte et de l'infraction à l'aide du «getElementByid ()" méthode:

var lh = document.getElementById ("texte");
var tool infodip = document.getElementById ("mytooltip");

Appelez l'info-bulle sur le «souris»Événement en définissant le texte dans la fonction à l'aide du«innerhtml" propriété:

LH.addEventListener ("Mouseover", function ()
infraction.style.Visibilité = "Visible";
infraction.innerhtml = "un meilleur site Web pour apprendre les compétences";
);

Masquez l'info-bulle sur le «souris»Événement en définissant le«visibilité«Propriété à«caché»:

LH.addEventListener ("Mouseout", function ()
infraction.style.Visibilité = "Hidden";
);

Créer un ID "#mytooltip”Dans la feuille de style qui stylisera l'info-bulle:

#mytooltip
Visibilité: cachée;
Largeur: 200px;
Z-Index: 1;
Color en arrière-plan: RVB (107, 101, 101);
Texte-aligne: Centre;
Couleur blanche;
rembourrage: 5px 0;
Border-Radius: 3px;
Gauche: 50%;

Comme vous pouvez le voir que l'info-bulle a été implémentée avec succès sur le texte:

Comment créer une info-bulle à l'aide de HTML et CSS?

Vous pouvez également créer une info-bulle sans javascript. Dans le fichier html, créez le texte "Linuxhint», Où l'info-bulle sera affichée tout en planant dessus. Créer un élément pour définir le texte de l'info-bulle à l'intérieur de l'en-tête / texte

étiqueter:

Linuxhint
class = "toolTipText">
Une plate-forme pour acquérir des compétences

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 "infraction«Cela est affecté à la rubrique:

.info-bulle
Position: relative;
Affichage: bloc en ligne;

Définissez une classe "info-bulle"Pour styliser le texte de l'info-bulle et lui attribuer le HTML"" étiqueter:

.ToolTipText
Visibilité: cachée;
Largeur: 150px;
Color en arrière-plan: RVB (107, 101, 101);
Couleur: #FFF;
Texte-aligne: Centre;
rembourrage: 5px 0;
Border-Radius: 3px;
Position: absolue;
Z-Index: 1;
En bas: 125%;
Gauche: 50%;
marge-gauche: -60px;
Opacité: 0;
transition: opacité 0.3S;

Ensemble "flotter«Effet avec le«infraction”Classe pour afficher l'info-bulle sur l'effet de survol:

.info-bulle: planer .ToolTipText
Visibilité: visible;
Opacité: 1;

Sortir

Nous avons compilé toutes les instructions nécessaires pertinentes à l'influence JavaScript simple.

Conclusion

Pour créer une info-bulle à l'aide de JavaScript, utilisez le «souris" et "souris”Événements, qui montre l'influence sur l'élément sur l'élément et le cache lorsque l'événement Mouseout est déclenché. Pour styliser l'info-bulle, utilisez le «style”Attribut en javascript. Dans cet article, nous avons démontré les meilleurs exemples possibles de création d'une infraction à l'aide de JavaScript, JavaScript avec CSS et une infraction sans JavaScript.