cluetip (doc en français)

Fonctionnalités

L’extension clueTip vous permet d’afficher facilement une infobulle (ou « info-bulle ») sur un lien lorsque l’utilisateur le survole avec la souris. Si le lien possède un attribut « title », son texte devient le titre de l’infobulle.

Sources de contenu multiples

Le contenu de l’infobulle peut provenir de plusieurs sources :

• un fichier externe, via AJAX ;
• un élément de la même page, généralement masqué ;
• l’attribut « title », analysé à l’aide d’un délimiteur défini par l’utilisateur (si l’option « splitTitle » est activée). Le texte précédant le premier délimiteur devient le titre de l’infobulle, et le reste du texte est placé dans des éléments <div class="split-body"></div> et ajouté au corps de l’infobulle.

Positionnement intelligent

• Utilise l’excellent plugin Dimensions pour tous ses besoins de positionnement.
• Se déplace de la droite vers la gauche du lien si l’espace entre le lien et le bord droit de la fenêtre du navigateur est insuffisant.
• Monte jusqu’à ce que l’infobulle soit entièrement visible si le lien est trop près du bord inférieur de la fenêtre du navigateur.
• Descend jusqu’à ce que le haut de l’infobulle soit au niveau du bord supérieur de la fenêtre du navigateur si l’infobulle est plus haute que la fenêtre (la zone visible).
• Se place à droite ou à gauche de la position de la souris si le lien est un élément de type bloc ou s’il est trop large pour que l’infobulle puisse s’afficher entièrement à sa gauche ou à sa droite.
• Descend en dessous de la position de la souris si l’infobulle ne peut pas s’afficher à sa droite ou à sa gauche. Se place au-dessus de la position de la souris uniquement si : a) l’espace en dessous est insuffisant sans être tronquée ; et b) l’espace entre le haut de la zone visible et la souris est suffisant.

Comportement flexible

• L’infobulle tire parti du plugin hoverIntent de Brian Cherne, s’il est disponible. (Il suffit de l’inclure dans une balise script pour que l’infobulle l’utilise.)
• Elle peut s’activer au survol ou au clic.
• Elle peut apparaître progressivement, glisser vers le bas, etc.
• Elle peut se fermer lorsque le curseur quitte le lien, l’infobulle ou lorsque l’utilisateur clique sur le lien de fermeture.
• Elle peut mettre en cache les résultats des requêtes AJAX, ou non.

Très nombreuses options

Voici la liste des options disponibles. Aucune n’est obligatoire.

• width : valeur par défaut 275
• local : valeur par défaut false ; définissez cette option sur true pour utiliser un élément de la page actuelle comme contenu de l’infobulle.
• hideLocal : valeur par défaut true. Si l’option local est définie sur true, cette option détermine si le contenu local affiché dans l’infobulle doit être masqué à son emplacement d’origine.
• Attribute : valeur par défaut rel ; définissez cette valeur sur un autre attribut du lien pour désigner cet attribut comme celui qui fait référence au contenu de l’infobulle.
• titleAttribute : valeur par défaut title ; définissez cette valeur sur un autre attribut pour utiliser son texte comme titre de l’infobulle.
• splitTitle : valeur par défaut une chaîne vide ; définissez cette valeur sur un caractère tel que « | » pour séparer l’attribut « title » d’un lien en l’en-tête de l’infobulle (la première chaîne de caractères, avant le premier caractère de séparation) et les éléments individuels du corps de l’infobulle (les chaînes de caractères suivantes).
• showtitle : valeur par défaut true. Affiche la barre de titre de l’info-bulle, qu’un attribut de titre soit défini ou non. Définissez cette valeur sur false pour masquer la barre de titre.
• cluetipClass : la valeur par défaut est vide. Cette propriété ajoute une classe à la balise div contenant l’info-bulle principale, avec un nom de classe au format cluetip- + clueTipClass. Elle ajoute également "clue-left-default" ou "clue-right-default" à cette même balise div, selon que l’info-bulle se trouve à gauche ou à droite de l’élément lien. Vous pouvez ainsi créer votre propre thème d’info-bulle dans un fichier CSS séparé ou utiliser l’un des trois thèmes prédéfinis : default, jtip ou rounded.
• hoverClass : la valeur par défaut est une chaîne vide. Indiquez le nom de la classe à ajouter au lien au survol de la souris.
• closePosition : la valeur par défaut est top. Définir cette valeur sur bottom pour placer le lien "close" ou "fermer" en bas de l’info-bulle. Une mise en forme supplémentaire peut être appliquée à a#cluetip-close dans la feuille de style.
• closeText : la valeur par défaut est Close ; vous pouvez la modifier.
• truncate : la valeur par défaut est 0 (aucune troncature) ; indiquez un nombre pour tronquer le contenu de l’info-bulle à n caractères.
• waitImage : la valeur par défaut est true ; détermine si l’image d’attente s’affiche pendant le chargement des info-bulles AJAX. Définissez cette valeur sur false pour masquer l’image.
• arrows : désactivées par défaut (false) ; activez cette option (true) pour calculer le positionnement des images d’arrière-plan des infobulles pour .clue-right-[theme] et .clue-left-[theme] (où [theme] représente la classe d’infobulle indiquée dans les options).
• dropShadow : activée par défaut (true) ; désactivez cette option (false) si vous ne souhaitez pas d’ombre portée sur l’infobulle.
• dropShadowSteps (taille de l’ombre portée) : 6 par défaut ; modifiez cette valeur pour ajuster la taille de l’ombre portée.
• sticky : désactivée par défaut (true) ; activez cette option (false) si vous souhaitez que l’infobulle reste ouverte lorsque vous quittez le lien avec la souris. Cette option ajoute également un lien close (fermer) à l’infobulle.
• cluezIndex : 97 par défaut ; définit la propriété de style z-index de l’infobulle.
• positionBy : automatique par défaut (auto). Options disponibles : mouse ou bottomTop. Modifiez la valeur en mouse si vous souhaitez remplacer le positionnement par élément et positionner l’infobulle en fonction de la position de la souris. Modifiez la valeur en bottomTop si vous souhaitez que le positionnement commence sous la souris lorsqu’il y a de la place, ou au-dessus sinon (plutôt qu’à droite ou à gauche de l’élément et aligné avec le haut de l’élément).
• fx : valeur par défaut :

  {
    open: 'show', 
    openSpeed: '', 
    close: 'hide', 
    closeSpeed: ''
  }

  Modifiez ces paramètres pour appliquer un effet jQuery lors de l’ouverture ou de la fermeture de l’infobulle.

• activation : par défaut, survol ; définissez-la sur toggle pour obliger l’utilisateur à cliquer sur l’élément afin d’activer l’infobulle.
• hoverIntent : par défaut c’est

  {
    sensitivity: 3, 
    interval: 50, 
    timeout: 0
  }

  Si le plugin jquery.hoverintent.js est inclus dans la balise

  , la fonction hoverIntent() sera utilisée avec ces paramètres au lieu de hover(). Définissez cette valeur sur false si, pour une raison quelconque, vous avez inclus le plugin hoverintent mais que vous ne souhaitez pas l’utiliser. Pour plus d’informations sur les options de hoverIntent, consultez http://cherne.net/brian/resources/j...
• onShow : la valeur par défaut est function (ct, c) ; vous permet de passer votre propre fonction une fois l’infobulle affichée.
• ajaxCache : la valeur par défaut est true ; met en cache les résultats de la requête AJAX afin d’éviter les requêtes inutiles au serveur. Si cette valeur est définie sur false, le script effectuera une requête AJAX à chaque affichage de l’infobulle, ce qui permet de charger du contenu dynamique.
• ajaxProcess : la valeur par défaut est :

  function(data) {data = $(data).not('style, meta, link, script, title');
    return data;
  }

  Cette valeur par défaut supprime les balises de l’en-tête

  d’une page HTML HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) affichée dans une infobulle via "AHAH".
• ajaxSettings : la valeur par défaut est dataType : ’html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) ’ . Vous pouvez modifier la valeur de l’argument dataType ou définir d’autres arguments utilisés par $.ajax() : uses, async, contentType, timeout, type, etc. Les arguments suivants ne peuvent pas être utilisés ici, car ils sont déjà utilisés par l’extension : beforeSend, complete, error, success, url. Une version ultérieure pourrait permettre de transmettre des valeurs personnalisées pour ces arguments.

$.cluetip.setup()