Pour commencer, un tooltip, qu'est-ce que c'est ? Et bien, c'est comme une infobulle, mais en beaucoup plus pratique -dans ce cas-ci en tout cas-. C'est une sorte d'outil que vous allez pouvoir rajouter et qui suivra le mouvement de la souris. En gros, moins de prise de tête avec le HTML !

Tout d'abord, rendez-vous dans vos templates. Panneau d'administration > Affichage > Templates > Général > Overall_header.
Juste après votre balise CSS, vous allez copier coller ceci :

Code:

<script type='text/javascript' src='http://files.jcink.net/html/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='http://files.jcink.net/html/jquery.cookie-1.3.1.js'></script>
 
<script type='text/javascript' src='http://files.jcink.net/html/catcollapse.js'></script>
<script src="http://greatdivide.b1.jcink.com/uploads/greatdivide/styletooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips({
            tip_follows_cursor:true,
    tip_delay_time:0,
    tip_fade_speed:300
    });
        });
    })(jQuery);

jQuery(document).ready(function($) {
 
 $(".scroll").click(function(event){
 event.preventDefault();
 $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
 });
});
</script>

Il est très important de mettre ça à cet endroit précis !


Rendez-vous ensuite dans votre CSS.
Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS.
Copiez collez ceci :

Code:

#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px;
background-color: #fff;
font-family:arial;
font-weight: 700;
text-transform: uppercase;
font-size:8px;  
color:#222;
border: 1px solid #f6f6f6;  
}

Dernier point mais des plus importants, pour que le tooltip fonctionne, il voudra rajouter un petit quelque chose à votre HTML. Par exemple, pour une image, il faudra faire ainsi :

Code:

<img src="LIEN_DE_L'IMAGE" class="tolltip" title="VOTRE TITRE ICI"/>

C'est le contenu du "title" qui s'affichera. Sur l'exemple donné plus haut, j'ai donc mis :

Code:

<a target="_blank" href="http://epsilon-ls.forumactif.com/"><img title="Epsilon" class="tooltip" src="https://via.placeholder.com/100x100" /></a>

Crédit : Le script hébergé vient de http://greatdivide.jcink.net/ ; codes de ce forum mis en libre service gratuitement.