Comment afficher, positionner et styliser une infraction dans HTML et CSS?

Une info-bulle est appelée un élément qui fournit des informations supplémentaires concernant un élément HTML. Cette information supplémentaire s'affiche chaque fois que l'utilisateur amène le curseur de la souris sur cet élément particulier. Ces info-bulleurs jouent un rôle important dans la mise à niveau d'une conception Web, car les utiliser vous empêcheront d'afficher des informations supplémentaires sur la page Web qui pourraient ne pas sembler bien autrement. Dans cet article, nous allons éclairer comment afficher, positionner et styliser une infraction dans HTML et CSS.

Avant de plonger dans d'autres détails sur une infraction, apprenons d'abord à créer une infraction principale.

Comment créer / afficher une infraction

L'exemple ci-dessous montre comment créer une info-bulle de base.

Html

Amenez la souris sur moi Texte info-bulle

Dans le code ci-dessus, nous avons créé un élément DIV et placé du contenu à l'intérieur et en utilisant un élément Span, nous ajoutons un texte info-bulle à l'intérieur de l'élément div. Notez que le div a été attribué à l'info-bulle de classe, en attendant, l'élément Span a reçu le Class ToolTipText.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px;
Position: absolue;
Z-Index: 1;

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

Ici, nous donnons à l'élément DIV une position relative pour positionner le texte de l'info-bulle et l'affichage en tant qu'élément de blocage en ligne afin que l'info-bulle soit placée juste à côté de l'élément div. De plus, en ce qui concerne cette div, nous ajustez la position de l'influence comme absolue. De plus, la visibilité de l'info-bulle est cachée, mais lorsque le curseur de la souris est amené sur l'élément div, l'info-bulle sera visible.

Sortir

Une info-bulle a été créée avec succès.

Maintenant que nous savons comment faire une infraction, explorons comment positionner l'influence.

Comment positionner une infraction

Il existe quatre types de positions que vous pouvez attribuer à une info-bulle et celles-ci sont mentionnées ci-dessous.

1. Haut
2. Bas
3. Gauche
4. Droite

Toutes ces positions sont démontrées ci-dessous à l'aide d'exemples.

Comment positionner une info-bulle en haut

Dans le but de positionner une info-bulle en haut, nous allons utiliser l'exemple utilisé ci-dessus.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px;
/ * Pour définir la position supérieure de l'info-bulle * /
Position: absolue;
Z-Index: 1;
En bas: 100%;
Gauche: 60%;
marge-gauche: -65px;

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

Dans le but de positionner l'info-bulle, nous utilisons la valeur absolue de la propriété de position afin qu'elle puisse être placée par rapport à l'élément div. De plus, pour le placer devant l'élément, nous lui donnons un ordre de pile de 1 en utilisant la propriété Z-Index. De plus, pour le placer exactement au-dessus de l'élément, nous avons réglé les propriétés du bas, de la gauche et de la marge gauche.

Sortir

L'infiltrade a reçu la position supérieure.

Comment positionner une info-bulle en bas

Afin de positionner une info-bulle en bas, considérez l'exemple ci-dessous.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px; / * pour définir la position inférieure de l'info-bulle * /
Position: absolue;
Z-Index: 1;
Top 100%;
Gauche: 60%;
marge-gauche: -65px;

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

La valeur absolue de la propriété de position positionne l'info-bulle par rapport à l'élément div. De plus, l'ordre de pile de l'info-bulle est réglé sur 1 pour le placer devant le conteneur div. De plus, pour le placer exactement en dessous de l'élément, nous avons réglé les propriétés en haut, à gauche et à la marge gauche.

Sortir

L'office a été positionné en bas.

Comment positionner une info-bulle à gauche

Si vous souhaitez positionner votre info-bulle à gauche d'un élément, consultez l'exemple ci-dessous.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px;
/ * Pour définir la position gauche de l'info-bulle * /
Position: absolue;
Z-Index: 1;
en haut: -6px;
À droite: 102%;

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

En dehors des propriétés de position et de l'index z, nous utilisons également le haut et les propriétés de droite pour positionner exactement l'info-bulle à gauche de l'élément spécifié.

Sortir

Positionné avec succès l'info-bulle vers la gauche.

Comment positionner une info-bulle à droite

Ici, nous avons démontré comment vous pouvez positionner une info-bulle à droite d'un élément.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px; / * pour définir la bonne position de l'info-bulle * /
Position: absolue;
Z-Index: 1;
en haut: -6px;
Gauche: 102%;

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

Ici, nous utilisons les propriétés supérieure et gauche pour définir la position de l'influence à droite d'un élément.

Sortir

L'office a été ajusté à droite.

Comment styliser une info-bulle

Dans les exemples ci-dessus, nous avons stylé l'influence en utilisant certaines propriétés CSS de base telles que la couleur d'arrière-plan, la couleur, le texte-alignement, la frontière et le padding. Cependant, il existe également d'autres façons de coiffer une infraction. Ici, nous vous avons montré certains d'entre eux.

Ajout d'une flèche à l'info-bulle

Aux fins d'ajouter une flèche, comme un discours de bulle, considérez l'exemple ci-dessous.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px;
Position: absolue;
Z-Index: 1;
En bas: 150%;
Gauche: 50%;
marge-gauche: -60px;

.infraction .ToolTipText :: après
contenu: "";
Position: Absolute; / * pour positionner l'info-bulle * /
Top 100%;
Gauche: 50%;
marge-gauche: -6px;
/ * Pour ajouter une flèche * /
Border: 6px solide;
Color à la frontière: transparent transparent rosybrown transparent;

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

Ici, nous utilisons le: après pseudo-élément pour afficher la flèche d'un côté particulier de l'info-bulle, donc le contenu après l'infraction est laissé vide. Cependant, pour créer la flèche, la propriété frontalière est utilisée. Pour maintenir la flèche au centre de l'info-bulle, les propriétés de largeur et de marge-gauche doivent être conçues mais opposées dans les valeurs des signes.

Nous utilisons la propriété de couleur bordure pour donner de la couleur à chaque bordure de la flèche. Seule la bordure supérieure reçoit la couleur rosybrown et le reste est réglé sur transparent. Si tous étaient donnés de couleur, la flèche apparaîtrait comme un carré.

Enfin, l'info-bulle et la flèche ont été placées au-dessus de l'élément. Si vous souhaitez positionner l'info-bulle avec une flèche à n'importe quelle autre position, consultez les exemples donnés ci-dessus.

Sortir

Ajout avec succès une flèche à l'info-bulle.

Comment ajouter un effet de fondu à l'info-bulle

Afin de donner un certain effet, par exemple, un effet de décoloration à l'influmerie, considérez l'exemple ci-dessous.

CSS

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

.infraction .ToolTipText
Visibilité: cachée;
Color en arrière-plan: Rosybrown;
Couleur blanche;
Border-Radius: 7px;
rembourrage: 5px 10px;
Position: absolue;
Z-Index: 1;
En bas: 150%;
Gauche: 50%;
marge-gauche: -60px; / * pour ajouter un effet de fondu à l'info-bulle * /
Opacité: 0;
transition: opacité 2S;

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

Dans le code ci-dessus, afin de faire disparaître l'infarcade lorsque la souris plane sur l'élément, la propriété de transition est utilisée avec la propriété Opacity. La durée de la transition a été fixée à 2 secondes, ce qui signifie qu'il faudra 2 secondes pour que l'info-bulle passe de l'invisible à complètement visible.

Sortir

L'effet de fondu fonctionne correctement.

Conclusion

Une info-bulle est appelée un élément qui fournit des informations supplémentaires sur un élément chaque fois qu'un curseur de souris est amené sur cet élément. Pour ajouter une info-bulle sur un élément, la propriété de position est utilisée en fonction de l'emplacement où vous souhaitez afficher l'influence. En plus de cela, vous pouvez ajouter une flèche, ou un effet de fondu à l'influme à petit pour lui donner un style. Dans cet article, nous avons éclairé comment afficher, positionner et styliser une infraction à l'aide de HTML et CSS.