Infobulle avec active

[Eiffel01]

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

[Invité]

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 bouton

a++

[Eiffel01]

Vous êtes magnifique

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

[Invité]

Salut Eiffel01,

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

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 .

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++

[Eiffel01]

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