Infobulles et version mobile

3 participants

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

infobulle* - Infobulles et version mobile Empty Infobulles et version mobile

Message par Coryanthe Dim 9 Juin 2019 - 15:53

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://protestantsreformes.forumactif.com/

Description du problème

Bonjour,
Je rencontre une difficulté avec les descriptions de certains forums. Sur certains de ces forums se trouvent des images qui affichent une infobulle quand on passe la souris dessus. Il y a du texte et une image dans ces infobulles. Or, sur la version mobile, on voit le texte de l'infobulle s'afficher dans la description (sans l'image) et j'aimerais qu'il ne soit pas là ou bien qu'il s'affiche après le reste de la description.
Quelqu'un saurait-il m'aider ?
Voici le code HTML d'une de ces descriptions :
Code:
<table>
             <tbody></tbody>
 <tr style="">
          
 <td>
          
 <div class="pa_infobulle">
                           <img src="https://www.zupimages.net/up/19/22/boii.jpg" />                            
 <div>
                                                  
 <div class="pa_contenu_bulle">
                                                      
 <h4>
                   Mère de Rembrandt lisant                  
 </h4>
                   Rembrandt <img alt="" src="https://zupimages.net/up/19/22/bcoo.jpg" />                  
 </div>
            
 </div>
        
 </div>
          
 </td>
          
 <td>
      Ce forum est fait pour discuter de vos interprétations de la Bible, toujours en s'appuyant sur le texte.
 </td>
            
 </tr><tbody></tbody>
</table>
Et le code CSS des infobulles :
Code:
.pa_infobulle {
     display: inline-block;
   margin: 1%;
}

.pa_infobulle > div {
    margin: 0 0 0 -57px;
    opacity: 0;
    position: absolute;
    transform: scale(0.3) rotate(-45deg);
    transition: all .3s linear;
    visibility: hidden;
z-index: 2;
}


.pa_infobulle:hover > div {
  opacity: 1;
        visibility: visible;
        transform: scale(1) rotate(0deg);
}

.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
}

.pa_contenu_bulle {
        background: #fff;
        padding: 2%;
        text-align: center;
        margin-top: 5px;
        font-size: 10px;
}

.pa_contenu_bulle h4 {
     text-transform: uppercase;
}

    ul.forums {
        overflow: visible !important;
    }
Merci d'avance pour vos réponses !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Lun 10 Juin 2019 - 15:58

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Mar 11 Juin 2019 - 16:47

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Mer 12 Juin 2019 - 20:51

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Ven 14 Juin 2019 - 16:45

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.
  • 0

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Adam_sfp Lun 17 Juin 2019 - 21:37

Bonsoir

Peut être en mettant ceci dans gestion des codes javascript.


Code:
$(document).ready(function() {
  function isTouchDevice() {
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
  }
  if (isTouchDevice() === true) {
    $(".pa_contenu_bulle").hide();
  }
});

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Chacha Jeu 20 Juin 2019 - 9:43

infobulle* - Infobulles et version mobile UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69993
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Ven 21 Juin 2019 - 13:31

Adam_sfp > Merci pour votre réponse ! Mais cela ne marche pas... :/
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Adam_sfp Ven 21 Juin 2019 - 16:42

Bonjour

Étrange de mon coté sur android chrome cela fonctionne..
Vous regardez sous ou sur quoi?

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Sam 22 Juin 2019 - 11:57

Bonjour,
Je suis bien sur Androïd Chrome. C'est normal qu'il n'y ait pas de texte d'infobulles pour les deux premières catégories (ce sont des images où je n'ai pas mis d'infobulles) mais pour une grande partie du reste, il y a des infobulles et je vois le texte sur version mobile... :/
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Mar 25 Juin 2019 - 14:02

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Adam_sfp Mar 25 Juin 2019 - 15:21

Bonjour

Enlever le script précédent et essayez en mettant ceci au CSS
Code:
@media screen and (min-width: 0px) and (max-width: 700px) {
           .pa_contenu_bulle {    display: none;  }
    }

Vous avez également 2 fois
Code:
.pa_contenu_bulle

Code:
.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
}
 
.pa_contenu_bulle {
        background: #fff;
        padding: 2%;
        text-align: center;
        margin-top: 5px;
        font-size: 10px;
}

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Mar 25 Juin 2019 - 20:47

Bonjour,
Merci beaucoup pour votre aide ! Je l'ai fait... Ca ne marche toujours pas :/
Voici mon nouveau CSS avec les modifications que vous avez proposées :
Code:
/* Bulles */
.pa_infobulle {
       display: inline-block;
     margin: 1%;
}

.pa_infobulle > div {
    margin: 0 0 0 -57px;
    opacity: 0;
    position: absolute;
    transform: scale(0.3) rotate(-45deg);
    transition: all .3s linear;
    visibility: hidden;
z-index: 2;
}


.pa_infobulle:hover > div {
  opacity: 1;
        visibility: visible;
        transform: scale(1) rotate(0deg);
}


.pa_contenu_bulle {
        background: #fff;
        padding: 2%;
        text-align: center;
        margin-top: 5px;
        font-size: 10px;
}

.pa_contenu_bulle h4 {
       text-transform: uppercase;
}

    ul.forums {
        overflow: visible !important;
    }

    @media screen and (min-width: 0px) and (max-width: 700px) {
              .pa_contenu_bulle {    display: none;  }
        }

/* Avatar dans la toolbar */
    .fa_avatar {
      width: 25px;
      height: 25px;
      position: relative;
      top: -3px;
      margin-right: 5px;
      border-radius: 3px;
      margin-bottom: -10px;
    }

/***************************** QEEL *****************************/

.bloc1{
  background-color: #D7D7D7;
  width: 350px;
  padding: 15px;
  text-align: justify;
  color: #343434;
  font-size: 11px;
  opacity: 0.50;
}

.titre_qeel {
  font-family: 'Megrim', cursive;
  color: #008080;
  font-size: 25px;
  text-align: justify;
}

.trans .row1 {
  background-color : transparent;
  color: #343434 !important;
}

#kaboum .row1 {
  background-color : transparent;
}

qeel.info{
  position: relative;
  z-index: 24;
  font-weight: none !important;
  font-style: none !important;
  text-decoration:none;
}
 
qeel.info:hover{
  z-index: 25;
  font-weight: none !important;
  font-style: none !important;
}
 
qeel.info span{
  display: none;
}
 
qeel.info:hover span{
  display: block;
  position: absolute;
  top: 3.5em;
 left: -2em; 
 width: 240px;
  padding: 15px;
  text-align: justify;
  color: #343434;
  font-size: 11px;
  background-color: #D7D7D7;
  border-radius: 25px 0px 25px 0px;
  border: 4px solid #D7D7D7;
}


/***************************** FIN QEEL *****************************/
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Jeu 27 Juin 2019 - 17:24

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Dim 30 Juin 2019 - 14:01

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Ven 5 Juil 2019 - 14:25

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Mar 9 Juil 2019 - 11:20

Up ! personne pour m'aider ?
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Dim 14 Juil 2019 - 13:24

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Chacha Sam 20 Juil 2019 - 9:40

infobulle* - Infobulles et version mobile UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69993
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Coryanthe Sam 20 Juil 2019 - 17:33

Up !
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Chacha Ven 26 Juil 2019 - 9:32

infobulle* - Infobulles et version mobile UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69993
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

infobulle* - Infobulles et version mobile Empty Re: Infobulles et version mobile

Message par Chacha Sam 27 Juil 2019 - 9:38

infobulle* - Infobulles et version mobile 8djze9qBonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69993
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha 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