SPIP-Contrib

SPIP-Contrib

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

291 Plugins, 198 contribs sur SPIP-Zone, 78 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 : https://plugins.spip.net/tooltip

Dernière modification de cette page le 11 novembre 2017

Retour en haut de la page

Vos commentaires

  • Le 2 mars 2014 à 18:41, par Antoine LUCAS 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 – 2534 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 (...)

  • Le Couteau Suisse

    4 mai 2007 – 1863 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Facteur

    21 janvier 2010 – 424 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 (...)

  • Owl Carousel 2

    30 novembre 2017 – 43 commentaires

    Owl Carousel est un diaporama jQuery adaptable aux différentes tailles d’écran, qu’on peut actionner par glisser, il utilise CSS3 mais il est compatible avec les vieux navigateurs, et il est aussi paramétrable. Le présent plugin permet d’utiliser (...)

  • GIS 4

    11 août 2012 – 1535 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)