SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 209 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > jQuery tooltips > jQuery tooltips

jQuery tooltips

14 septembre 2013 – par kent1 – commentaires

6 votes

Des infobulles en jQuery et CSS, accessibles au clavier.

Ce plugin utilise le script jQuery Tooltip de Jörn Zaefferer pour les versions de SPIP n’intégrant pas le plugin jQuery UI ou n’intégrant qu’une version ancienne (inférieur à 1.10.1).

Pour les versions plus récentes de SPIP, ce sera le script de jQuery UI idoine qui sera utilisé.

Ce script jQuery permet de transformer les attributs title d’éléments HTML (comme les liens, les abréviations...) en infobulles stylisables et réactives.

Configuration du plugin

Sa configuration est relativement simple, il est simplement demandé de remplir l’input correspondant au sélecteur CSS sur lequel appliquer les infobulles.

Dans l’image ci-dessous, on les applique à tous les liens et champs de formulaires de type input.

Usage manuel

Vous n’êtes pas obligé de configurer ce plugin. Vous pouvez l’utiliser manuellement dans vos sites en appelant les fonctions javascript désirées.

Par exemple, dans le site « Traduire SPIP », le code suivant active les tooltips.

  1. var crayons_textarea = function(){
  2. jQuery('.crayon-html textarea').tooltip({
  3. showURL: false
  4. });
  5. }
  6.  
  7. (function($) {
  8. $('.bilan a, .bilan abbr, .bilan tr, .bilan td, .bilan .graph, textarea').tooltip({
  9. showURL: false
  10. });
  11. onAjaxLoad(crayons_textarea);
  12. })(jQuery);

Télécharger

Exemple d’utilisation

Ce plugin est activé sur le site « Traduire SPIP » notamment sur sa page « Bilan ».

Voir en ligne : http://plugins.spip.net/tooltip

Dernière modification de cette page le 5 avril 2015

Retour en haut de la page

Vos commentaires

  • Le 2 mars 2014 à 18:41, par Antoine En réponse à : jQuery tooltips

    Le problème c’est que cette fonctionnalité n’est pas opérationnelle pour les mobinautes, pas d’infobulle possible pour les tablettes et smartphone.
    Une adaptation du plugin est-elle possible ?

    Répondre à ce message

  • Le 21 novembre 2013 à 12:34, par manu En réponse à : jQuery tooltips

    Bonjour,

    J’ai du louper une explication quelque part.

    J’ai le plugin tooltips

    Je veux dans un article, dans lequel j’ai fait un tableau, afficher du texte en infobulles au survol du contenu des cases.

    colonne 1 colonne 2
    Molière Racine

    Par exemple : quand la souris survole Molière, je voudrais voir apparaitre : « Jean-baptiste Poquelin, dit Molière » dans une infobulle.

    Mes questions :

    1/ Pour cela, Tooltips me demande de configurer un « sélecteur ».

    -  Kezako ?
    -  Est-ce l’équivalent d’un raccourci typographique du type note de bas de page ou
    affichage de code
    -  Lequel faut-il choisir et pourquoi ?

    2/ Ensuite dans mon tableau, quel « sélecteur » dois-je mettre avant et après le contenu de l’infobulle ?

    Merci de votre aide

    • Le 21 novembre 2013 à 13:01, par kent1 En réponse à : jQuery tooltips

      Hello

      Pour le 1, c’est un sélecteur CSS ou Jquery qu’il te faut, google sera ton ami pour comprendre ce que c’est.

      Pour le 2 le mieux est que tu mettes dans ton tableau, par exemple, pour Molière :

      <abbr title="Jean-baptiste Poquelin, dit Molière">Molière</abbr> au lieu de Molière en gros tu le mets comme une abbréviation.

      Du coup, dans le sélecteur jQuery, tu peux mettre « abbr » et normalement, ça devrait marcher.

      Pense à vider le cache au cas où ça ne marche pas avant de le signaler ici avec l’url de la page en erreur.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Champs Extras 3

    16 janvier 2012 – 523 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 188 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

  • Recommander

    3 avril 2011 – 16 commentaires

    Ce plugin propose une manière simple de suggérer de recommander par email un article à un ami. Fonction « recommander un article à un ami ». On l’ajoute dans n’importe quel squelette sous la forme : #RECOMMANDERtitre de la page,url de la page,intro (...)

Ça spipe par là