On a toujours besoin d’un petit message en pop-up local, un ToolTip !
J’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 get_stylesheet_directory_uri(); ?>/js/tooltipster.css » />
<script type= »text/javascript » src= »<?php echo get_stylesheet_directory_uri(); ?>/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 »>
jQuery (document).ready(function() { <- utilisation de l’option jQuery NoConflict
jQuery(‘ .coloris ‘).tooltipster({ <- je pointe sur la classe « coloris »
animation: ‘ grow ‘, <- un petit zoom à l’affichage
position: ‘ top ‘, <- une disposition au-dessus de l’élément lien
arrowColor: ‘ #e40613 ‘, <- une couleur particulière pour la flèche pointeur
theme: ‘ .tooltipster-shadow ‘ <- 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 :
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-Tinytips, UnitedThemes
