[PHPBB3]Tooltip avec iframe

Re bonjour,

J'ai quasiment "tooltipstered" toutes mes infobulles, amis je bute sur celle ci à cause de l'iframe.

Dans mes généralités:

Code:

<!--                                                                                              Logos partenaires                                 -->
<div class="partenaire">
                                                                          <iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">   </iframe>
</div>


La page html (probablement améliorable):


Je crois qu'il ne passe pas....


Merci pour votre aide.

Je le remets là:

La page html (probablement améliorable):

Code:

<meta name="viewport" content="width=device-width, initial-scale=1" />    <style>
    * {box-sizing:border-box}
    body {
      font-family: Verdana,sans-serif;
          max-width: 300px;
          max-height: 300px;
      overflow:hidden !important;
    }
  
    .mySlides {display:none}

    /* Slideshow container */
    .slideshow-container {
      max-width: 250px;
      position: absolute;
      margin: auto;
    }

 /* Titre slideshow*/
.nametext {
 font-size: 18px;
 font-family: Comic Sans MS;
 color: #3b699c;
 padding: 8px 12px;
 position: relative;
 text-align:center;
}  
  

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1s;
      animation-name: fade;
      animation-duration: 1s;
    }

    @-webkit-keyframes fade {
      from {opacity: .5}
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .5}
      to {opacity: 1}
    }

 </style>                              
<div class="slideshow-container">
                        
 <div class="mySlides fade">
               <span style="display: block;text-align:center;padding: 5px;margin-top: -10px;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;">Nos partenaires                                                                                                                        </span><a href="https://photoclic.forum-pro.fr/t19916-partenaires-photos#M14" rel="nofollow" target="_blank"><img src="https://i.servimg.com/u/f25/18/97/96/21/logo_a10.jpg" title="Cliquer pour voir les infos du partenaire" style="border: 8px #35aed7;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:100px;max-width:200px;" /> </a>                                                                                                                                        
 </div>
                                                  
 <div class="mySlides fade">
                 <span style="display: block;text-align:center;padding: 5px;margin-top: -10px;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;">Nos partenaires                                                                                                                         </span> <a href="https://www.facebook.com/atelierphotomarie/" rel="nofollow" target="_blank"><img src="https://i.servimg.com/u/f25/18/97/96/21/logo_p10.png" title="Cliquer pour voir les infos du partenaire" style="border: 8px #35aed7;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:100px;max-width:200px;" /> </a>                                                                                                                                        
 </div>
                                                   <span class="dot"></span>      <span class="dot"></span>      <span class="dot"></span>          
</div>
 <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 5000); // Change image every 7 seconds
    }
    </script>

le but donc et d'avoir le tooltip sur l'infobulle.

Merci pour votre aide.


Edit:
En voulant poster l'html, la fenêtre se réduit sans laisser la possibilité d'envoyer.
En le mettant dans ce second message, la fenêtre se réduit aussi, mais l'accès au bouton reste possible.

hello Serge,
si tu supprimes l'infobulle dans ta page html :

Code:

title="Cliquer pour voir les infos du partenaire"

et que dans généralités tu remplaces:

Code:

<div class="partenaire">
<iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">  </iframe>
</div>

Par :

Code:


<!--Logos partenaires-->
<div class="partenaire"title="Cliquer pour voir les infos du partenaire">
<iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">  </iframe>
</div>


Il suffit de placer l'infobulle sur la div contenant l'iframe  

Edit:
En voulant poster l'html, la fenêtre se réduit sans laisser la possibilité d'envoyer.
En le mettant dans ce second message, la fenêtre se réduit aussi, mais l'accès au bouton reste possible.

Oui, il y a un bug avec l'éditeur

Re Phil,

En faisant ainsi, je n'ai plus d'infobulles.

Hum étonnant car sur mon fofo de test, c'est fonctionnel Serge,

tu peux remplacer par:

Code:


    <!--Logos partenaires-->
    <div class="partenaire"title="Cliquer pour voir les infos du partenaire">

    <iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">  </iframe>
<script>
        
jQuery('.partenaire').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });
</script>
    </div>


Cette fois l'infobulle est bien là et toolstipered

Mais elle est décalée à gauche par rapport au diaporama.

Mais elle est décalée à gauche par rapport au diaporama.

Il faut donner le style à la div et non à l'iframe Serge
Et laisser juste le border none à l'iframe

Je verrais mieux ce style pour ta div:

Code:


position: relative;
width: 250px;
border: none;
height: 150px;
left: 80%;
margin-top: -20%;


OK Philippe, c’était bien ça, t'es incollable.

Encore un grand merci l'ami

De rien Serge,

-Staff du Forum Milouze14- Hello  Sujet résolu et déplacé dans le forum adéquat. Pour toute information,merci de contacter un Membre du Staff