SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 232 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

  • Serveur HTTP abstrait

    25 novembre 2013 – commentaires

    Un plugin-outil pour aider les développeurs à implémenter des API orientées REST, basées sur les méthodes HTTP (get, post, put, delete). Ce plugin a pour but premier de normaliser des URL que l’on pourra appeler pour manipuler les données du site. À (...)

  • Agenda Fullcalendar facile

    29 octobre 2016 – 33 commentaires

    Dans un précédent article, nous expliquions comment afficher un agenda Fullcalendar sur son site avec le plugin agenda. Cependant, ceci nécessite des manipulation de squelettes, ce qui n’est pas toujours évident lorsqu’on débute. La présente (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 93 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 804 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Abonnements

    31 janvier 2015 – 18 commentaires

    Gérer des abonnements à des offres, et uniquement cela. Ce plugin a pour but de regrouper tout ce qui est commun aux différents types d’abonnements possibles (à des zones restreintes, à des contenus précis, à une version papier pourquoi pas (...)

Ça spipe par là