info bulle pour définition d'un mot

[massya]

Bonjour,

Existe-t-il un moyen de créer une petite fenêtre pop up qui apparaitrait lorsque l'on clique ou l'on passe sur un mot pour avoir sa définition?
Si oui quelles seraient les étapes pour réaliser ça ?

Merci d'avance pour votre aide.

[Invité]

Bonsoir,

Il s'agit d'un système d'infobulle. Vous pouvez par exemple utiliser ce code :

Dans Panneau d'Administration => Affichage => Images et couleurs => Couleurs => Onglet "Feuille de style CSS"

Code:

a.info {
  position: relative;
  color: black;
  text-decoration: none;
  border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
  display: none; /* On masque l'infobulle. */
}
a.info:hover {
  background: none; /* Correction d'un bug d'Internet Explorer. */
  z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
  cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
  display: inline; /* On affiche l'infobulle. */
  position: absolute;
  white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
  top: 30px; /* On positionne notre infobulle. */
  left: 20px;
  background: white;
  color: green;
  padding: 3px;
  border: 1px solid green;
  border-left: 4px solid green;
}

Le code HTML

Code:

<a href="#" class="info">Texte du lien<span>Définition en infobulle</span></a>

Au passage de la souris sur le texte, une infobulle apparaît.

Bien sûr, le code CSS est personnalisable. Il vous suffit de suivre les annotations.


Cordialement.

[massya]

Merci Kinotto,

Je suis vraiment débutante, alors désolée d'avance si mes questions sont bêtes...
Je ne suis pas sûre de ce que je dois changer (annotations).
Puis je avoir un exemple concret, svp?

Cordialement

[Invité]

Re,

Par exemple, si vous voulez donner la définition du mot psychosomatique, il vous suffit de remplacer

Code:

<a href="#" class="info">Texte du lien<span>Définition en infobulle</span></a>

Par :

Code:

<a href="#" class="info">Psychosomatique<span>Maladie caractérisée par des symptômes physiques dont les causes sont multiples, mais où des facteurs émotionnels jouent un rôle important. Elle affecte habituellement un organe ou un système physiologique. Les manifestations physiologiques sont celles qui accompagnent normalement certaines émotions, mais elles sont plus intenses et plus prolongées. Des émotions réprimées ont une action physiologique qui, si elle est durable et suffisamment intense, peut amener des perturbations de la fonction, voire une lésion de l'organe. Le malade n'est pas conscient de la relation qui existe entre sa maladie et ses émotions.</span></a>

Sans oublier bien sûr d'insérer le code CSS communiqué plus haut.

Cordialement.

[massya]

ok, super, merci.

Je pense avoir compris.
Pour chaque mot, je change le code html dans mes messages. Et pour le CSS, je peux faire des changements pour l'apparence de ma bulle, c'est ça?

Mais est-ce que la bulle apparaitra seulement en passant sur le mot du message ou dans les autres messages écrits ailleurs aussi ?

Cordialement

[Invité]

Bonjour,

Et pour le CSS, je peux faire des changements pour l'apparence de ma bulle, c'est ça?

Exactement !

Mais est-ce que la bulle apparaitra seulement en passant sur le mot du message ou dans les autres messages écrits ailleurs aussi ?

Seulement sur le mot du message, il faut insérer un code pour chaque mot.


Cordialement.

[massya]

Bonsoir,

Après essai, ça marche !
Je vous remercie encore;
Je me suis permise de changer le titre du message, plus explicite...

Cordialement

[Invité]

Je vous en prie, bonne continuation .