Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Infobulle avec active

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Infobulle avec active

Message par Eiffel01 le Mer 4 Nov 2015 - 16:19

Bonjour,
Je souhaiterais que mon infobulle reste à l'écran quand on lui clique dessus et qu'il faut recliquer pour qu'elle disparaisse. J'ai essayé (voici mon test code) mais sans succès :
code CSS :
Code:
  a.espace-personnel { position:relative; color:#000; text-decoration:none;  }
  a.espace-personnel:active { z-index:25; transition-duration: 2s  }
  a.espace-personnel span { display: none; }
  a.espace-personnel:active span { display:block; z-index: 23; position:absolute; top:99%; left:-10% ; width: 112%;
  border: 1px solid rgb(190,190,190); background: rgb(237,237,237);  color:#000; text-align: justify;
  font-weight:none;  padding:5px;  }

HTML :
Code:
<a class="espace-personnel">Espace personnel
            <span>Cette infobulle ne marche pas</span></a>

Quelqu'un peut-il m'aider ?
Cordialement


Dernière édition par Eiffel01 le Sam 7 Nov 2015 - 21:55, édité 1 fois
Eiffel01

Eiffel01
***

Masculin
Messages : 198
Inscrit(e) le : 10/03/2014

http://maths-laboisse.forumactif.org
Eiffel01 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec active

Message par Milouze14 le Mer 4 Nov 2015 - 17:28

Salut Eiffel01 ,

en supprimant des éléments inutiles et en laissant l'essentiel puis on passe par un Javascript :

Ta c.s.s essentielle:
Code:

a.espace-personnel {cursor:pointer; position:relative; color:#000; text-decoration:none;  }
a.espace-personnel span { display:none; z-index: 23; position:absolute; top:99%; left:-10% ; width: 112%;
          border: 1px solid rgb(190,190,190); background: rgb(237,237,237);  color:#000; text-align: justify;
          font-weight:none;  padding:5px;  }


Ton code html modifié:
Code:
   
<a class="espace-personnel"><span>Cette infobulle ne marche pas</span>Espace personnel</a>

Puis le script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coche l'endroit ou doit agir le script.

Déposes ceci:
Code:

$(function(){
$('.espace-personnel').click(function(){
$(this).find('span').fadeToggle();
});});


Penses à cliquer sur le boutonInfobulle avec active Boutonvalider

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5706
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec active

Message par Eiffel01 le Sam 7 Nov 2015 - 14:28

Vous êtes magnifique Very Happy

Merci beaucoup, pouvez-vous m'expliquer rapidement la partie Javascript ?
Bonne journée

Eiffel01

Eiffel01
***

Masculin
Messages : 198
Inscrit(e) le : 10/03/2014

http://maths-laboisse.forumactif.org
Eiffel01 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec active

Message par Milouze14 le Sam 7 Nov 2015 - 19:12

Salut Eiffel01,

je vais tâcher d'être le plus clair possible Very Happy .

Ton code html:
Code:

<a class="espace-personnel">
<span>Cette infobulle ne marche pas</span>
Espace personnel</a>

Le script:
Code:
       
$(function(){
$('.espace-personnel').click(function(){
 $(this).find('span').fadeToggle();
});});
       

La class
Code:
('.espace-personnel')
qui au click
Code:
.click(function()
puis a partir d'elle
Code:
(this)
recherche la suite:
Code:
.find
le span
Code:
('span')
puis on affiche ou on cache avec transition:
Code:
.fadeToggle();

Est ce suffisant car on se comprend toujours mais quand il faut le l'expliquer c'est autre chose Very Happy .

Exemple avec un autre code html

Code:

<a class="afficher">
<span>Infobulle jQuery</span>
Espace personnel</a>

Le script sera alors:
Code:
       
$(function(){
$('.afficher).click(function(){
 $(this).find('span').fadeToggle();
});});
       


a++




Milouze14

Milouze14
Membre actif

Masculin
Messages : 5706
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec active

Message par Eiffel01 le Sam 7 Nov 2015 - 21:54

Merci beaucoup pour ces renseignements qui me serviront une prochaine fois, j'en suis sûr !
Vous avez été très clair.

Bonne journée et encore merci
Eiffel01

Eiffel01
***

Masculin
Messages : 198
Inscrit(e) le : 10/03/2014

http://maths-laboisse.forumactif.org
Eiffel01 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum