Publié : 02 nov. 2008, 12:20
Ah! des cons s'agitant devant nous c'est tentant !
Exemple méchamment hacké sur http://www.pierrebertet.net/projects/jq ... letooltip/
J'ai repris les CSS sans rien modifier (il y a du nettoyage à faire). Je pose pour hypothèse qu'il n'y a pas besoin d'explications sur ce point là.
Il ne reste plus que l'essentiel de la démo:
http://sapajou.be/test.html
Tout tient dans les deux fichier .js
Code : Tout sélectionner
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.simpletooltip-pack.js"></script>Ensuite, il faut fabriquer ses infobulles. Elles se trouvent, invisibles, dans les <div> du bas de la page. Ici, il y en a trois qui s'appellent tooltip_1, tooltip_2 et tooltip_3.
Elles sont cachées par un mécanisme Javascript.
Le deuxième secret se trouve dans
Code : Tout sélectionner
<script type="text/javascript">
$(function(){
$("a.tooltiplink").simpletooltip();
$("a.clic").simpletooltip({click: true});
$("a.delay").simpletooltip({hideDelay: 0.5});
})
</script>En gros, cela signifie que tous les liens (<a>) auxquels on aura attribué la class "tooltiplink" vont avoir le comportement "simpletooltip()" défini en Javascript.
Lors du passage de la souris sur le lien <a href="#tooltip_x" class="tooltip">, le div qui porte le même "id" que la référence href va apparaître.
Pour a.clic, même système; mais ne concerne que les liens (<a>) auxquels on a attribué la class "clic". Et finalement, encore idem pour le troisième si l'on a attribué la class "delay".
Après, on joue un peu avec tout ça jusqu'au moment où l'on a un peu compris comment ça marche. Et finalement, on revient aux explications détaillées pour avoir plus de précisions. Par exemple, sur ce qui est indiqué entre les accolades.
Voilà, je n'avais jamais touché à ces "tooltips" avant. Mais si l'idée est de reculer devant toutes les difficultés, je ne suis pas du tout sûr que le parapente soit un bon plan (de vol).
Bon courage.
[edit]quelques précisions apportées dans le texte ci-dessus[/edit]
[nota]Overlib est très bien. Je l'ai utilisé aussi. Mais je trouve que des machins comme
Code : Tout sélectionner
<a href="javascript:void(0);" onmouseover="return overlib('Bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, ).',
STICKY, MOUSEOFF);" onmouseout="return nd();">here</a>Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092510 Ubuntu/8.04 (hardy) Firefox/3.0.3
