retarder l'apparition d'une infobulle

[MlleAlys]

Bonjour (ou bonsoir xP) !

Je m'excuse si le sujet a déjà été abordé autre part, je n'ai pas trouvé. Voilà mon problème :

J'ai installé des infobulles sur des images (dans la description des forums, de façon à ce que la description de celui ci apparaisse au passage de la souris sur l'image), mais j'aimerais que l'infobulle en question n'apparaisse qu'après une seconde (par exemple).

J'ai cru comprendre après quelques recherche qu'il fallait utiliser setTimeout et clearTimeout dans du javascript, mais malheureusement, je n'y connais rien au javascript, et je suis incapable d'adapter ce que je trouve à ce que je veux !

voilà le code mis en description d'un de mes forums :

et la partie css concernée pour la class "infobulle" :

(adresse du forum : http://estrelane.forumactif.com/ , le code plus haut est celui de "Questions et suggestions")

merci d'avance !

[MlleAlys]

up ! ^^

[mambo54321]

Ce ne serait pas plutôt:

Code:


        <a href="http://estrelane.forumactif.com/f7-questions-et-suggestions">
          <img  title="Une remarque, un problème, une idée pour le forum ? C'est ici !" src="http://i36.servimg.com/u/f36/12/56/43/35/demand11.gif">
        </a>

[MlleAlys]

hmmm non je ne pense pas, parce que le fait de définir moi même mon infobulle me permet de la positionner là où je veux et la mettre en forme comme je veux ^^

et à présent je cherche à retarder son apparition...

mais merci de la réponse ! =D

[Adam_sfp]

Bonjour

Vous pouvez essayer de rajouter et remplacer

Code:

  a.infobulle span {
            opacity: 0;
        }

et rajouter dans a.infobulle:hover span

Code:

 opacity: 1;
  transition-delay:1s;
webkit-transition-delay:1s;
-moz-transition-delay:1s;
-ms-transition-delay:1s;

Cordialement.

[MlleAlys]

c'était une bonne idée, je n'y avais pas pensé ! =D
mais après quelques bidouillages, je peux dire que ça ne fonctionne pas, ou alors je n'y arrive pas : je ne sais pas pourquoi, mais aucun effet de transition n’apparaît sur l'infobulle, qu'importe le tupe que je mets T-T

[MlleAlys]

up

[MlleAlys]

up

[[Nihil]]

Salut MlleAlys

Voici un code css qui marche :

Code:

           /*INFOBULLE 1*/
        a.infobulle{
            position: relative;
            padding:4px;
        }
        a.infobulle span {
            background-color: rgba(255,255,255,0.6);
            border: 1px solid #ffffff;
            color: #10191D;
            font-size: 10px;
            display: inline; /*pas toucher*/
            left: 30px; /*espace gauche par rapport au texte survolé*/
            top: -10px;/*espace haut par rapport au texte survolé*/
            right: 30px;
            width: auto;
            heigth: auto;
            padding: 3px; /*espace a l\'intérieur de la bulle par rapport aux bordures*/
            position: absolute; /*pas toucher*/
            text-align:center;
         
         /* Une fois qu'on a réglé l'apparence de l'infobulle, on la masque*/
         opacity:0;
         /* On règle ici la transition */
         -webkit-transition: all 1s ;
         -moz-transition: all 1s ;
         -ms-transition: all 1s ;
         -o-transition: all 1s ;
         transition: all 1s ;
        }
        a.infobulle:hover {
              background: none repeat scroll 0 0 transparent;
            z-index: 999;
        }
        a.infobulle:hover span {
         /* Au survol, l'opacité passe à 1, on peut donc voir l'infobulle !*/
          opacity:1;

        }
        /*FIN INFOBULLE 1*/

Je l'ai testé sur mon ordinateur, cela fonctionnait sans problème. Néanmoins, n'hésite pas à me dire si ce n'est pas l'effet que tu cherchais, ou bien si cela ne marche pas.

Bonne soirée (:

[MlleAlys]

oui ça fonctionne, et je vais l'arranger à ma sauce pour avoir ce que je veux, merci beaucoup !! =D
(j'ai dû faire une erreur en essayant au dessus alors ><")

merci encore, je mets en ! =D