SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 198 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 ?

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

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2141 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Facteur

    21 janvier 2010 – 375 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Sélections éditoriales

    19 mars 2015 – 66 commentaires

    Faites des listes de choses intéressantes. Ce plugin permet de gérer des listes de contenus quelconques de manière éditoriale. Chaque sélection est donc entièrement libre, et peut renvoyer aussi bien vers des contenus internes au SPIP quels qu’ils (...)

  • En onglets dans le texte de SPIP, ou ailleurs...

    18 décembre 2006 – 132 commentaires

    Une mise en page en blocs superposés, très pratique pour des fiches techniques par exemple, toutes versions SPIP !

  • Des blocs dépliables

    6 janvier 2008 – 473 commentaires

    Cet outil vous permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (...)