THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonjour, à tous et toutes,
J'ai inséré une tooltip en jquery sur un lien de produit et ma fenêtre affiche l'info pour le visiteur quand il survole l'élément concerné lien " Plus d'infos ".
Mais l'affichage de cette fenêtre ne s'effectue pas sur les autres produits qui ont exactement la même caractéristique que le premier lien qui est le seul à fonctionner.
Je vous mets un lien pour exemple http://santons-lambert-jocelyne.fr/sain … gieux.html  sachant que pour les autres produits qui sont dans les autres rubriques sont affichés avec un résultat identique à l'exemple.
Merci de m'avoir lu
A+ Steph

  • manu
  • faï tot petar miladiu

Offline


Bonjour,

l'élément id est unique pour tout le document, tu ne peux donc pas avoir plusieurs fois :

<a id="demo_2" href="#tooltip_1">

passe plutôt par l'attribut class et refait ton sélecteur jquery en fonction de ça, exemple :

<a class="demo_tooltip" href="#tooltip_1">

et ton sélecteur :

$(".demo_tooltip")

ainsi jquery va chercher tous les éléments qui ont pour class "demo_tooltip".


http://doc.thelia.net/
http://thelia.net/modules
http://raynaud.io
PGP public Key : 0xC6E546A6

Offline


Ok, merci pour la réponse, je vais réadapter l'ensemble avec une classe.
je mets plus d'info dès que c'est rétabli
A+ Steph

Offline


Voici le script réadapté pour ceux qui sont intéressés par une Tooltip simple qui désire informer leur visiteur comme sur le lien " Plus d'infos ", bien sûr les visiteurs peuvent accéder au produit soit en cliquant sur l'image ou en cliquant sur le lien nom de produit et ils auront une description complète du produit que vous avez rempli dans la description de votre B.O.

Celui ci est à placer dans le head de votre meta rubrique par exemple
vous remarquerez que l'on utilise la méthode no.Conflict associé à une variable $J, si vous utilisez cette méthode vous devez appliquer le $J dans votre fichier JS.
    <script type="text/javascript">
    var $j = jQuery.noConflict();
        $j(function(){
            $j("a.tooltiplink").simpletooltip();
            $j("a.clic").simpletooltip({click: true});
            $j("a.delay").simpletooltip({hideDelay: 0.5});
            $j(".demo_1").simpletooltip({ margin: 10 });
            $j(".demo_tooltip").simpletooltip({ showEffect: "fadeIn", hideEffect: "fadeOut" });
            $j(".demo_3").simpletooltip({ showEffect: "slideDown", hideEffect: "slideUp" });
            $j(".demo_4").simpletooltip({ showEffect: "show", hideEffect: "hide" });
            $j(".demo_5").simpletooltip({ click: true });
            $j(".demo_6").simpletooltip({ hideDelay: 0.5 });
            $j(".demo_7").simpletooltip({ click: true, hideOnLeave: false });
            $j(".demo_8").simpletooltip({
                callback: function(tooltip){
                    window.alert('Callback : affichage de la tooltip #'+tooltip.id);
                }
            });
            $j(".demo_9").simpletooltip({
                customTooltip: function(target){
                    return '<p style="width:200px;height:50px;margin:0;padding:10px;background:#fff;border:1px solid #000;">Texte de l\'élément survolé :<br /> "'+ $j(target).text() +'" </p>';
                },
                showEffect: "fadeIn",
                hideEffect: "fadeOut"
            });
        });
    </script>

La ligne modifiée dans le template rubrique
<p><a class="demo_tooltip" href="#tooltip_1"><span> <span><strong>::infosup::</strong></span></span></a></p>

Le texte que l'on veut faire apparaître pour nos visiteurs à placer en bas de notre dernière page mais avant la dernière DIV de la page
                    <div class="demo_tooltip">
                    <div id="tooltip_1" class="tooltip">
                        <div class="heading">
                        <div class="action">
                            <a class="close" onclick="demo_9.hideAll(this,event);" href="javascript:void(0)" rel="close"style="-moz-user-select: none;">Fermer</a>

                        <h2>Commandes & Cours</h2>
                        <p><strong>Atelier des Santons d&#39;Art</strong> : Jocelyne Lambert<br />
                        <strong>Commander</strong>&nbsp;<a title="Pour me contacter"href="http://www.santons-lambert-jocelyne.com/">Commander</a><br />
                        Toutes les infos sur l&#39;atelier et ses stages<a title="Sculptures, modelage"href="http://www.santons-lambert-jocelyne.com/">En savoir un plus sur mes ateliers</a><br />
                        Un <strong>santon modelé et peint t&eacute;l : 04 86 71 25 91</strong> Une artiste santonnier &agrave; votre &eacute;coute
                        </p>
                                                </div>
                        </div>
                    </div>
                    </div>

Le css modifiée pour site http://santons-lambert-jocelyne.fr/sain … gieux.html

#tablist h1{margin:15px 0;padding:0;line-height:24px;font-size:24px;border-bottom:1px solid #000;}
#tablist h1 a{text-decoration:none;color:#1d9f2f;}
#tablist h2{margin:14px 0;line-height:18px;font-size:18px;}
#tablist h3{font-size:14px;} */
#tablist div{margin-top:40px;border-bottom:1px solid #000;}
#tablist div h2{padding:5px 10px;background:#eee;border-left:5px solid #131f50;zoom:1;}
#tablist div h3{clear:left;font-size:18px;}
#tablist .demo_tooltip a, a:visited {color: #515053;}
pre{overflow:auto;padding:5px;color:#fff;background:#666;}
pre code{font:12px monospace;}
/*ul{list-style-type:square;}*/
/*     img{border:0} */
#jsmin a.download{display:block;padding:10px 20px;font-size:20px;font-weight:bold;text-decoration:none;text-align:center;color:#fff;background:#1d9f2f;-moz-border-radius:8px;}
.demo_tooltip{
}
.tooltip{z-index;1;position:absolute;margin:-10px;width:38em;padding:10px;font-size:11px;color:#666;/*background:#fff;*//*background: url("/img/flyout-slotchoice-header-bg.gif") repeat-x scroll left top #978F82;*/
background-color:#d0771e;border:5px solid #A0522D;}
/*.heading .action{background: url("/img/flyout-slotchoice-header-bg.gif") repeat-x scroll left top #978F82;}*/
.heading .action{background: #fff;}
.tooltip h2{padding: 4px 8px;}
.tooltip p{margin:0 24px;text-align:justify;}
#tooltip_1{z-index:100000;}
#tooltip_2{height:300px;width:300px;background:#fff;border-color:#e66;}
#tooltip_3{background:#fff;border-color:#8c6;}
#tooltip_1.tooltip .action .close {background: url("/img/icons-sprite.gif") no-repeat scroll -621px top transparent;
    height: 15px; letter-spacing: -999em;  position: absolute;  right: 0.75em;  text-indent: -999em;  top: 0.7em;  width: 15px;}
#tooltip_1.tooltip .action .close a:link, a:active, a:visited {  text-decoration: none;}

Le lien pour le fichier JS que vous aurez besoin http://santons-lambert-jocelyne.fr/temp … tip-min.js
La tooltip est issue de Pierre Bertet jQuery Simple Tooltip 0.9.1 pierrebertet.net

Merci à Manu pour l'attribut classe.

Offline


Petite précision, n'oubliez pas de placer l'ensemble de vos scripts JS dans le meta associé et non le template (comme je l'avais laissé par inadvertance) sinon vous n'aurez pas de superbox-min.js si vous utilisez ce slider.
Rappel : pensez à placer vos appels css js avant les scripts js
A+ Steph

Last edited by stephst84 (23-03-2013 18:36:25)