Faire une belle infobulle rapidement !

Créer une infobulle stylée en quelques clics !

Pour les débutants

Pour créer une infobulle sur UBTF, rien de compliqué ! Grâce à Nathan-Slender-le-codeur-fou, les créer sera désormais un jeu d'enfant même si vous n'y connaissez (presque) rien en codage.
Pour exemple, le rendu final devrait ressembler à ça :

Survolez-moi ! (infobulle 1)Ceci est une infobulle très simple à créer et qui a l'avantage d'être assez jolie (comparée aux très laids "abbr" par défaut de HTML).
Survolez-moi ! (infobulle 2)Cette infobulle-ci est légèrement transparente, ce qui lui donne une intégration différente de la précédente.
Survolez-moi ! (infobulle 3)Petite infobulle !

Trois types d'infobulles sont disponibles pour le moment - ce sont les trois types proposés ci-dessus. Pour créer ces trois infobulles, le code est extrêmement simple.
Pour l'infobulle 1 :

Code:

<span class="lieninfobulle">[TEXTE À SÉLECTIONNER]<span class="infobulle1">[TEXTE DE L'INFOBULLE]</span></span>

Pour l'infobulle 2 :

Code:

<span class="lieninfobulle">[TEXTE À SÉLECTIONNER]<span class="infobulle2">[TEXTE DE L'INFOBULLE]</span></span>

Pour l'infobulle 3 :

Code:

<span class="lieninfobulle">[TEXTE À SÉLECTIONNER]<span class="infobulle3">[TEXTE DE L'INFOBULLE]</span></span>

Comme vous pouvez le voir, le code est très simple à retenir et facile d'utilisation ; il suffit de remplacer les parties entre crochets.




Pour les débrouillards

Les débrouillards peuvent modifier les codes des infobulles à l'aide de la propriété style="<code css>".
Il faut savoir utiliser un minimum le langage CSS pour effectuer ce genre de modifications.
Voilà un exemple de ce que cela peut donner :

Survolez-moi !Le texte de l'infobulle et son style graphique sont personnalisés. La largeur est modifiée, car ce n'est pas la largeur standard d'une infobulle transparente.

(bien entendu, le style graphique est plutôt laid, surtout dans le contexte, mais il s'agissait d'un exemple)

Vous pouvez modifier rapidement le code en copiant-collant le suivant :

Code:

<span class="lieninfobulle"><span style="[STYLE DU TEXTE]">[TEXTE À SÉLECTIONNER]</span><span class="infobulle[1|2]" style="[STYLE DE L'INFOBULLE]">[TEXTE DE L'INFOBULLE]</span></span>

Vous pouvez modifier le style du texte à sélectionner (comme par exemple sa couleur avec la propriété color), ainsi que le style de l'infobulle (sa largeur avec l'attribut width, la couleur du texte avec l'attribut color, la couleur de fond avec background-color voire même l'image de fond avec background-image)... En bref, utilisez tout le CSS dont vous auriez besoin, en laissant le code de base s'occuper de l'affichage de l'infobulle !




Une dernière chose

Si vous avez des idées de nouvelles infobulles "par défaut", proposez-les sur ce sujet !