epsilon
forum de libre service de codage,
possibilité de commander des designs,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -56%
Figurines Funko POP TV SQUID GAME à 6,99€
Voir le deal
6.99 €

Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
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 !
[ASTUCE] Infobulle qui suit le mouvement de la souris SN5VYRW

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.
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum