On a toujours besoin d’un petit message en pop-up local, un ToolTip !

logo tooltipsterJ’ai fait des recherches pour dégoter une extension pour WordPress de ToolTip (pop-up javascript au survol d’un lien ou image) qui soit élégante et facile à mettre en œuvre. Belle déception car ce que j’ai trouvé de pertinent, la plus intéressante (jquery-tinytips) s’appliquait à TOUS les liens du site…

La bonne solution serait de pouvoir pointer sur une classe CSS par exemple, j’ai testé 2 solutions basées sur jQuery :

  • Tip Tip
  • Tooltipster

Si Tip Tip est pratique puisqu’il peut pointer sur n’importe quel élément ou lien avec un choix à définir dans les paramètres sur le type d’attribut à cibler (alt, rel, title, etc) je ne l’ai pas retenu car son usage sur tablette et smartphone est moins complet qu’avec Tooltipster. Ce dernier travaille sur des liens ciblés en CSS et son aspect usage sur un iPad est très satisfaisant (disparition rapide).

Il ne me restait plus qu’à intégrer la librairie dans le thème enfant basé sur Nevada d’UnitedThemes.

Ajouter des règles d’inclusion n’est pas trop compliqué, on duplique le fichier header.php depuis le thème parent et on vient ajouter les appels vers les fichiers placés dans le thème enfant.

Pour être sûr de pointer au bon endroit, dans le cas d’un thème enfant il faut utiliser la recherche d’url comme suit pour des fichiers en sous-dossier « js » :

<link rel= »stylesheet » type= »text/css » href= »<?php echo [highlight bg= »#ffea9e » color= »#000000″]get_stylesheet_directory_uri();[/highlight] ?>/js/tooltipster.css » />

<script type= »text/javascript » src= »<?php echo [highlight bg= »#ffea9e » color= »#000000″]get_stylesheet_directory_uri();[/highlight] ?>/js/jquery.tooltipster.min.js »></script>

Dans ces 2 cas on place les styles et la librairie Javascript Tooltipster (j’ai ajouté une seconde feuille de styles optionnelle). Pas besoin d’appeler jQuery, WordPress 3.5 embarque la version 1.8.3 qui suffit à faire fonctionner Tooltipster.

La configuration que j’ai mise en place est personnalisée comme suit :

<script type= »text/javascript »>
    [highlight bg= »#ffea9e » color= »#000000″]jQuery[/highlight](document).ready(function() { <- utilisation de l’option jQuery NoConflict
        jQuery(‘[highlight bg= »#ffea9e » color= »#000000″].coloris[/highlight]’).tooltipster({ <- je pointe sur la classe « coloris »
        animation: ‘[highlight bg= »#ffea9e » color= »#000000″]grow[/highlight]’, <- un petit zoom à l’affichage
        position: ‘[highlight bg= »#ffea9e » color= »#000000″]top[/highlight]’, <- une disposition au-dessus de l’élément lien
        arrowColor: ‘[highlight bg= »#ffea9e » color= »#000000″]#e40613[/highlight]’, <- une couleur particulière pour la flèche pointeur
        theme: ‘[highlight bg= »#ffea9e » color= »#000000″].tooltipster-shadow[/highlight]’ <- un choix de thème livré avec Tooltipster
        });
   });
</script>

On peut voir qu’il faut utiliser l’option jQuery NoConflict avec Tooltipster (peut être à cause du thème Nevada qui embarque un lot de librairies complémentaires conséquent), c’est le seul souci rencontré à la mise en place dans mon thème enfant.

De nombreuses options sont disponibles pour personnaliser votre Tooltipster, ainsi qu’un set de thèmes livrés avec la librairie :

Une fois activé (voir le code d’appel complet dans la galerie), j’ai pu admirer l’effet sur des pictos de coloris :

Tooltipster en actionTooltipster en actionTout le code d'inclusion 

Ne pas oublier un hack javascript pour nos amis d’Internet explorer qui ne comprennent pas bien tout ce qui touche à HTML5.

Sources : Tooltipster, Tip Tip, jQuery-TinytipsUnitedThemes

Laisser un commentaire