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'Art</strong> : Jocelyne Lambert<br />
<strong>Commander</strong> <a title="Pour me contacter"href="http://www.santons-lambert-jocelyne.com/">Commander</a><br />
Toutes les infos sur l'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él : 04 86 71 25 91</strong> Une artiste santonnier à votre é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.