Comment faire apparaître des bulles de texte au survol de la souris.

[exdiogene]

Ce tutoriel vous démontrera comment il est facile d'afficher des bulles de texte.

La méthode utilisée est une table avec différent arrière plan CSS et utilisant seulement 2 images. Voici un exemple de ce que vous pouvez faire pour afficher votre texte :

<iframe src="Tutoriels/Bulle.html" width="716" height="360"></iframe>

Voici les 2 images utilisée pour cet exemple :

<div style="background-color:#806000;width:700px; padding:8px;"><img src="Tutoriels/Bulle.gif" width="700">

<img src="Tutoriels/BulleCentre.gif" width="700"></div>

Le CSS contient ceci :

Code PHP :

.table_bulle{
  background-color : transparent;
  padding:0;
  margin:0;
  spacing:0;
  border: none;
}
.table_bulle_dessus_gauche{
  background : transparent url(Bulle.gif) no-repeat left top;
  padding-top: 32px;
  padding-left: 32px;
  padding-bottom: 8px;
  font-weight: bold;
}
.table_bulle_dessus_droit{
  background: transparent url(Bulle.gif) no-repeat right top;
  width: 40px;
}
.table_bulle_centre_gauche{
  background : transparent url(BulleCentre.gif) left top;
  padding-left: 32px;
  color:#0000ff;
}
.table_bulle_centre_droit{
  background : transparent url(BulleCentre.gif) right top;
  width: 40px;
}
.table_bulle_dessous_gauche{
  background : transparent url(Bulle.gif) no-repeat left bottom;
  height : 48px;
}
.table_bubble_dessous_droit{
  background: transparent url(Bulle.gif) no-repeat right bottom;
  width: 40px;
} 


Le HTML contient ceci :

Code PHP :

<table class="table_bulle" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bulle_dessus_gauche">Exemple bulle de texte #1</td>
  <td  class="table_bulle_dessus_droit"></td>
 </tr>
 <tr>
  <td  class="table_bulle_centre_gauche">
   Vous pouvez avoir une longue ligne de texte affichée sans interruption...
  </td>
  <td class="table_bulle_centre_droit"></td>
 </tr>
 <tr>
  <td class="table_bulle_dessous_gauche"></td>
  <td class="table_bulle_dessous_droit"></td>
 </tr>
</table>
<table class="table_bulle" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bulle_dessus_gauche">Exemple bulle de texte #2</td>
  <td  class="table_bulle_dessus_droit"></td>
 </tr>
 <tr>
  <td  class="table_bulle_centre_gauche">
  Ou vous pouvez<br / >
  avoir de multiples<br / >
  lignes les unes <br / >
  sur les autres...
  </td>
  <td class="table_bulle_centre_droit"></td>
 </tr>
 <tr>
  <td class="table_bulle_dessous_gauche"></td>
  <td class="table_bulle_dessous_droit"></td>
 </tr>
</table> 


Comme vous pouvez avoir remarqué il c'était assez simple simple à faire, le truc n'était que l'utilisation d'une table avec 2 colonnes et 3 rangées!

Maintenant, comment faire apparaître cette bulle par le survol de la souris...

Il faut simplement un peu plus de CSS et deux balises supplémentaires :

Voici le CSS à ajouter :

Code PHP :

a.info
{
    position:relative;
    z-index:24;
    border:none;
    color:#000;
    cursor: pointer;
    text-decoration : none;
}
a.info:hover {z-index:25; border:#fd0 1px solid}

a.info div{display: none}

a.info:hover div
{
    display:block;
    position:absolute;
    top:16px; left:16px; width:640px;
    border:1px solid #0cf;
    background-color:#ba8; color:#000;
    padding: 2px;
} 


Et la table sera maintenant enveloppée par ce code HTML :

Code PHP :

<a class="info" href="javascript:void(0);"><div>
... Contenu de la Bulle ici ...
</div>
.. contenu du texte ou la souris survolera pour faire apparaître la bulle...
</a> 


<iframe src="Tutoriels/Bulle2.html" width="716" height="240"></iframe>

Voilà maintenant la fin de ce tutoriel, avec un exemple de la bulle qui surgit lorsque vous passerez votre souris sur le texte dans la boîte ci-dessus.

[Zeatlan]

Un grand merci à toi Exdiogene
Je vais tester de ce pas

[TheDiamant953]

Moi ce n'est pas vraiment sa que je cherche, cette technique sert a mettre la bulle sur du texte voulus, ce que j'aimerais c'est changé toutes les bulles ou elles sont déja, en gros changé sont apparence, comme par exemple ici :



Et changé la bulle noir en une autre, et ceci pour tous ce qui à une description et qui ouvre une bulle au survol de la souris

[exdiogene]

@TheDiamant953 :
Je tiens à mentionner que les intitulés "title" (tooltip) sont contrôlés par le navigateur lui-même, il est donc impossible de les modifier avec du CSS. Il faut donc faire appel soit à du Javascript ou à une méthode comme la mienne pour obtenir de tels résultats.

[Zeatlan]

Je ne comprend pas comment "envelopper" tout le code, voici mon code :

Code :

<a class="info" href="javascript:void(0);"><div>Mybb</a>
<table class="table_bulle" cellpadding="0" cellspacing="0">
<tr>
  <td class="table_bulle_dessus_gauche">Mybb</td>
  <td  class="table_bulle_dessus_droit"></td>
</tr>
<tr>
  <td  class="table_bulle_centre_gauche">
   Nous tournons sur le moteur MyBB
  </td>
  <td class="table_bulle_centre_droit"></td>
</tr>
<tr>
  <td class="table_bulle_dessous_gauche"></td>
  <td class="table_bulle_dessous_droit"></td>
</tr>
</table>
</div>

[exdiogene]

Ce serait plutot :

Code :

<a class="info" href="javascript:void(0);"><div>
<table class="table_bulle" cellpadding="0" cellspacing="0">
<tr>
  <td class="table_bulle_dessus_gauche">Mybb</td>
  <td  class="table_bulle_dessus_droit"></td>
</tr>
<tr>
  <td  class="table_bulle_centre_gauche">
   Nous tournons sur le moteur MyBB
  </td>
  <td class="table_bulle_centre_droit"></td>
</tr>
<tr>
  <td class="table_bulle_dessous_gauche"></td>
  <td class="table_bulle_dessous_droit"></td>
</tr>
</table>
</div>Mybb</a>

[Zeatlan]

Sa ne fonctionne pas :
http://puu.sh/2D4FT.png
la bulle reste activer !

[exdiogene]

Est-ce que les deux sections de code CSS ont été copiées dans le style du thème?

[Zeatlan]

Oui

[exdiogene]

Il me faut le lien URL du forum afin de visualiser le code...

[exdiogene]

Suite à l'obtention de l'URL dans une autre discussion et la réinstallation du copyright de MyBB dans le pied de page, je vais mentionné qu'il manque une partie du code CSS dans le style. Il n'y a que la première moitié de la deuxième section CSS qui est copiée, la partie invisible du bas de la fenêtre est manquante.

Voici la partie manquante sur le site :

Code PHP :

a.info div{display: none}

a.info:hover div
{
    display:block;
    position:absolute;
    top:16px; left:16px; width:640px;
    border:1px solid #0cf;
    background-color:#ba8; color:#000;
    padding: 2px;
} 


[Zeatlan]

Ok merci,
je le mettrais plus tard
Pour l'instant j'essaye de savoir comment faire pour mon problème que je viens de poster précédemment ^^