Membres connectés récemment
[PHPBB3]Tooltip avec iframe
2 participants
Page 1 sur 1
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:
La page html (probablement améliorable):
Je crois qu'il ne passe pas....
Merci pour votre aide.
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):
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.
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 :
et que dans généralités tu remplaces:
Par :
Il suffit de placer l'infobulle sur la div contenant l'iframe
Oui, il y a un bug avec l'éditeur
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
Hum étonnant car sur mon fofo de test, c'est fonctionnel Serge,
tu peux remplacer par:
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>
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum