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

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

+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : MyBB.fr (https://mybb.support/forum-1.html)
+--- Forum : Tutoriels (https://mybb.support/forum-19.html)
+--- Sujet : Comment faire apparaître des bulles de texte au survol de la souris. (/thread-6411.html)

Comment faire apparaître des bulles de texte au survol de la souris. - exdiogene - 19-04-2013

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> 

RE: Comment faire apparaître des bulles de texte au survol de la souris. - Zeatlan - 19-04-2013

Un grand merci à toi Exdiogene Big Grin

Je vais tester de ce pas Smile

RE: Comment faire apparaître des bulles de texte au survol de la souris. - TheDiamant953 - 19-04-2013

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 :

[Image: lNxY]

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 Wink

RE: Comment faire apparaître des bulles de texte au survol de la souris. - exdiogene - 19-04-2013

@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.

RE: Comment faire apparaître des bulles de texte au survol de la souris. - Zeatlan - 19-04-2013

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>

RE: Comment faire apparaître des bulles de texte au survol de la souris. - exdiogene - 19-04-2013

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>

RE: Comment faire apparaître des bulles de texte au survol de la souris. - Zeatlan - 19-04-2013

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

RE: Comment faire apparaître des bulles de texte au survol de la souris. - exdiogene - 19-04-2013

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

RE: Comment faire apparaître des bulles de texte au survol de la souris. - Zeatlan - 19-04-2013

Oui Smile

RE: Comment faire apparaître des bulles de texte au survol de la souris. - exdiogene - 19-04-2013

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

RE: Comment faire apparaître des bulles de texte au survol de la souris. - exdiogene - 19-04-2013

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;
} 

RE: Comment faire apparaître des bulles de texte au survol de la souris. - Zeatlan - 19-04-2013

Ok merci,
je le mettrais plus tard Big Grin

Pour l'instant j'essaye de savoir comment faire pour mon problème que je viens de poster précédemment ^^

Utilitaire de traduction fourni par Regentronique