jHelperTip, encore des infos-bulles pour vos sites via jQuery
jHelperTip est un plugin pour jQuery qui vous permet d'afficher des infos-bulles (tooltips) sur votre site/blog. Même si chaque système d'info-bulle se ressemble, ils ont tous leurs particularités. Celui-ci est assez complet et facile à prendre en main.
Allez, voici la demo !
Mise en place
1. On inclut la librairie jQuery (si ce n'est pas déjà fait) ainsi que le fichier jquery.jHelperTip.1.0.min.js dans la page entre les balises HTML <head> et </head>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.jHelperTip.1.0.min.js"></script>
<script type="text/javascript" src="jquery.jHelperTip.1.0.min.js"></script>
2. Pour activer les tooltip, on inclut le code suivant:
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
$(document).ready(function(){
//Active les tooltips sur tous les liens et affiche la valeur de l'attribut href
$("a").jHelperTip({
trigger: "hover",
source: "attribute",
attrName: "href",
opacity: 0.8,
autoClose:true
});
//Active les tooltip pour les images, s'affiche si on clic sur l'image et contient l'attribut alt
$("img").jHelperTip({
trigger: "click",
source: "attribute",
attrName: "alt",
opacity: 0.9,
autoClose:false
});
});
//Active les tooltips sur tous les liens et affiche la valeur de l'attribut href
$("a").jHelperTip({
trigger: "hover",
source: "attribute",
attrName: "href",
opacity: 0.8,
autoClose:true
});
//Active les tooltip pour les images, s'affiche si on clic sur l'image et contient l'attribut alt
$("img").jHelperTip({
trigger: "click",
source: "attribute",
attrName: "alt",
opacity: 0.9,
autoClose:false
});
});
Evidement ce ne sont que des exemples, à vous d'adapter.
Les options possibles
- trigger: "click" ou "hover"
- topOff: position offset vertical du tooltip par rapport au pointeur de la souris
- leftOff: lposition offset horizontale du tooltip par rapport au pointeur de la souris
- source: peut ètre "container", "ajax" ou "attribute", container est un objet DOM de la page, ajax charge le contenu d'une autre page, attribute récupère un attribut html de l'élément courant.
- attrName: le nom de l'attribut HTML que vous voulez afficher dans le tooltip (uniquement si l'option source vaut "attribute")
- ttC: l'élément DOM qui recevra le contenu chargé en AJAX, si pas précisé, un conteneur sera crée automatiquement
- dC: l'élément DOM qui sera affiché si l'option source vaut "container"
- aC: l'élément DOM sur lequel recuperer l'attribut (uniquement si l'option source vaut "attribute")
- opacity: opacité des tooltips
- loadingImg: url relative de l'image de chargement(uniquement si l'option source vaut "ajax")
- loadingText: texte pendant le chargement (uniquement si l'option source vaut "ajax")
- type: "GET" ou "POST" (uniquement si l'option source vaut "ajax")
- url: url relative de la page à charger (uniquement si l'option source vaut "ajax")
- data: les données à passer à votre page appelée en AJAX (uniquement si l'option source vaut "ajax")
- autoClose: true ou false, précise si la tooltip doit se fermer via une action
Liens
-----
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Ajouter un lien pour envoyer la page par e-mail
Je préfère les tooltip dynamique de Mootools mais elles sont pas mal
Hey… j’viens juste de m’en servir, merci k-ny