Tether, une librairie qui vous veut du bien

Je suis particulièrement content de faire cet article pour vous en parler, mais pas autant que d’avoir découvert Tether, une librairie de positionnement javascript qui englobe quatre plugins assez géniaux. Si comme moi vous êtes saoulés d’avance au moment de choisir un énième plugin dans un projet pour assurer les fonctionnalités que nous allons voir tout de suite, je pense que vous allez adorer Tether. Let’s go !

Tether, une librairie javascript qui vous aime

Tether est donc une librairie javascript, développée par HubSpot et sous licence MIT, dont le rôle est de gérer le positionnement d’éléments dans une page web automatiquement. Selon la résolution et le scroll dans la page, elle va prendre l’initiative de positionner les tooltips de la manière la plus logique. J’ai testé, et je suis convaincu.

C’est léger, la bibliothèque minifiée pèse 23,3ko, soit environ 15ko gzippé. Le CSS quant à lui pèse 10ko, soit 6-7ko gzippé pour les 3 thèmes disponibles. De plus, je ne me suis pas farci tout le code mais pour ce que j’en ai vu, c’est très élégant.

Pour comprendre de quoi je parle, je vous renvoie à la page de démo des possibilités de Tether, avec le code correspondant. Comme vous le constatez, ces démos contiennent un élément parent, et un élément enfant quelconque (tooltip, modal, menu… À vous de voir) fixé au parent par un point d’attache que vous pouvez choisir parmi les 15 possibles (trois pour chaque côté et à l’intérieur) tant pour le container que pour l’élément. L’utilisation est simple, voici un exemple de code que vous retrouverez sur la page de démo :

new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'bottom left',
  targetAttachment: 'top left'
});

Ça, c’est la version la plus simpliste. L’élément sera accroché à son parent, mais il ne changera pas automatiquement dans la page selon le scroll / redimensionnement. Du coup vous allez me demander « Mais dis-moi, puisque c’est si génial, comment j’attache un élément qui se replace automatiquement, et qui ne sort pas de la page visible quand l’élément parent en sort ? » – et je vais vous répondre que je m’y attendais un peu, et que ça marche tout simplement avec des « contraintes ». Regardez plutôt :

new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'scrollParent',
      attachment: 'together',
      pin: true
    }
  ]
});

Pas beaucoup plus compliqué, si ? (Bon évidemment c’est plus classe avec l’exemple à coté, si vous ne l’avez pas encore fait, allez jeter un coup d’œil à la démo.)

Les possibilités sont assez nombreuses et la lib est d’une simplicité à pleurer. Vous pouvez configurer nombre d’autres choses que je ne citerai pas, leur doc est assez claire et interactive pour tout comprendre.

Sur Tether sont bâtis quatre projets, ou plugins, qui ne requièrent rien d’autre que Tether, c’est fait « from scratch ».  Vous trouverez une démo de chacun sur la page de démo de Tether. Détaillons-les :

Select

Capture du 2015-10-24 17:31:12Select est un plugin dont la fonction est de remplacer les listes déroulantes html <select>, derniers vestiges vieillots et non stylisables en CSS, qui, dans un projet où vous avez soigné aux petits oignons chaque élément pour le faire correspondre à votre charte graphique, continuent d’imposer leur interface toute pourrie, et qui sont gérés directement par l’OS. (Bon certes sur les tablettes et mobiles c’est plutôt classe de manière native. Mais sur Windows 95, hein ?! On en parle, des <select> sur Windows 95 ?)

C’est à ce point précis que Select, marchant sur les traces de ses illustres prédécesseurs dont le plus connu est sans doute chosen, entre en jeu en substituant habilement à ces fossiles listes déroulantes un élément construit en HTML5, et donc, stylisable jusqu’à pu soif. Mais s’il a des prédécesseurs (qui en plus sont franchement cool, tel chosen), qu’est ce qu’il a de plus, du coup ? C’est une excellente question, je vous remercie de me l’avoir posée. C’est d’ailleurs la seule chose à retenir après tout ce blabla inutile, que bah justement, il est construit sur Tether. Et que, de par le fait, il bénéficie de ce placement automatique des plus efficaces pour le container de la liste déroulante.

Deux ou trois petites choses cool à noter à propos de Select :

  • Vous trouverez tous les events et fonctions javascript nécessaires pour contrôler ces listes, comme par exemple la dérouler au clic sur un élément externe (checkbox, input, div…). On peut faire ça avec un <select> ? Je ne crois pas, non !
  • Si comme moi vous êtes un(e) gros(se) flemmard(e) et que vous n’avez pas l’énergie de les styliser, les développeurs ont pensé à vous et proposent trois zolis thèmes, light, dark et chosen, justement. (Un thème chosen ? Ce serait pas pour lui couper la select sous le pied par hasard ?)
  • L’équipe de dev dit que « le développement a été pensé pour s’approcher au plus près du comportement natif des listes déroulantes ».
  • Comme je l’ai dit, sur mobile ou tablette c’est pas vraiment la peine de substituer quoi que ce soit. Ça tombe bien, un paramètre permet de le désactiver par défaut sur les résolutions ≤ 640px en hauteur ou en largeur.

Drop

Capture du 2015-10-25 11:20:20

Drop est un plugin dont la fonction est d’afficher des dropdowns sur vos éléments, c’est à dire des éléments qui s’affichent au passage de la souris ou au clic. Ça peut être un élément quelconque, évidemment. La page de démo montre un input range, un menu de social links, une « hover card » (preview d’un profil) et un popover. Après, les possibilités sont très larges et comme on dit dans le milieu, votre seule limite, c’est votre imagination. Pas grand chose à dire de plus, c’est pas nouveau nouveau comme concept les dropdowns, sauf que là ce qui est intéressant, une fois encore, c’est qu’il tire avantage de Tether et que le positionnement du dropdown est intelligent ; en outre, vous avez des options et fonctions pour tout et n’importe quoi, comme de faire en sorte que le drop reste visible même si l’élément parent sort de l’écran, tout ça.

Tooltip

Capture du 2015-10-25 11:26:40

Je me disais aussi, difficile de parler de dropdown sans parler de tooltip. Un tooltip est une petite infobulle, généralement affichée au passage de la souris, pour révéler des infos supplémentaires. La version moderne de la balise title. Ça commence à faire un moment que les tooltips sont dans le paysage, je pense que vous êtes familiers avec, pas de révolution ici non plus donc. On notera 12 positions possibles (avec la flèche qui se met au bon endroit toute seule, du coup), ainsi que la possibilité de les placer sur un élément avec du markup HTML, comme ceci :

<a href=# data-tooltip="Weeeeee" data-tooltip-position="top center">I'm a link!</a>

Quand j’ai dit qu’il n’y avait aucune autre dépendance que Tether pour ces 4 plugins, j’ai un peu menti, j’avoue : Tooltip requiert Drop, le plugin dont on vient de parler avant celui-là. Mais c’était la seule exception, je le jure !! Enfin c’est quand même logique, les dropdowns et les tooltips, même s’ils ne jouent pas le même rôle ergonomique, ont une base assez similaire en termes de code.

A noter que Tooltip vient avec deux thèmes, un light et un dark.

Shepherd

Capture du 2015-10-25 11:44:37

Le dernier, et non des moindres : j’ai nommé Shepherd. Connaissez-vous cette tendance qui consiste à mettre un overlay sur le body, faire ressortir un élément, et y joindre un popover explicatif avec des boutons de navigation précédent / suivant, permettant de prendre les utilisateurs par la main pour leur faire comprendre comment marche votre site ou app, façon visite guidée, en expliquant les choses point par point ?

Eh bien contre toute attente, figurez-vous que c’est exactement ce que fait Shepherd. Dingue non ? Et il le fait plutôt bien. L’intégrer dans vos projets est intuitif, il faut créer un « tour » (ndlr : une visite guidée en français) et lui ajouter les étapes souhaitées, en linkant pour chaque étape l’élément qui doit être mis en avant, et en ajoutant un texte et des boutons qui peuvent avoir différents comportements selon la fonction qu’on leur donne (suivant, précédent, quitter…). J’ai l’impression de radoter mais bon, une fois encore, le positionnement automatique de ces popovers est optimal, et vous avez quantité d’options et d’events pour contrôler le déroulement de la visite tel un chef d’orchestre. Le support est de IE9+ et android browser 4.3+.

Pour finir

Je pense que tout est dit, c’était pour ma part la belle découverte de la journée, et même si j’ai juste un peu fait joujou avec, je suis impatient d’utiliser cette librairie dans un vrai projet pour voir l’étendue des possibilités qu’elle offre, et surtout le temps que ça fait gagner. Si vous avez manqué mon article sur bootstrap, sachez que la version alpha utilise Tether comme dépendance pour les popovers et les tooltips. Je vous laisse avec cette belle petite librairie, cet article est resté volontairement vague avec les exemples de code du fait de la multitude de possibilités qu’offre Tether et ses quatre plugins, on y aurait passé la nuit sinon. Mais je vous encourage à parcourir un peu tout ça. À bientôt !

Sources

Démo / doc de Tether : http://github.hubspot.com/tether

Github de Tether : https://github.com/HubSpot/tether

Démo de Select : http://github.hubspot.com/select/docs/welcome

Documentation de Select : http://github.hubspot.com/select

Github de Select : https://github.com/HubSpot/select

Démo de Drop : http://github.hubspot.com/drop/docs/welcome

Documentation de Drop : http://github.hubspot.com/drop

Github de Drop : https://github.com/HubSpot/drop

Démo de Tooltip : http://github.hubspot.com/tooltip/docs/welcome

Documentation de Tooltip : http://github.hubspot.com/tooltip

Gihtub de Tooltip : https://github.com/HubSpot/tooltip

Démo de Shepherd : http://github.hubspot.com/shepherd/docs/welcome

Documentation de Shepherd : http://github.hubspot.com/shepherd

Github de Shepherd : https://github.com/HubSpot/shepherd

Adam Écrit par :

Développeur web et webdesigner en Freelance passionné de code et de design. Autodidacte et amoureux de la connaissance, je suis curieux et passe mon temps à apprendre de nouvelles choses, que j'ai envie de vous faire partager !

Soyez le premier à commenter

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *