{"id":1133,"date":"2023-03-10T17:48:45","date_gmt":"2023-03-10T16:48:45","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1133"},"modified":"2023-03-10T17:48:46","modified_gmt":"2023-03-10T16:48:46","slug":"gloubi-script-un-systeme-de-tooltip","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/10\/gloubi-script-un-systeme-de-tooltip\/","title":{"rendered":"Gloubi script – un syst\u00e8me de tooltip"},"content":{"rendered":"\n

J\u2019ai d\u00e9cid\u00e9 cette semaine de me pencher sur le script de tooltip<\/a> pr\u00e9sent\u00e9 sur le site de gloubiweb.<\/p>\n\n\n\n

Dans une premi\u00e8re partie je pr\u00e9senterai rapidement le fonctionnement du script actuel, et dans une deuxi\u00e8me, je vous indiquerai comment recr\u00e9er (quasi) \u00e0 l\u2019identique cet ancien script.<\/p>\n\n\n\n

Pr\u00e9sentation de du code existant<\/h2>\n\n\n\n

Le script actuel se compose de plusieurs fonctions et classes assurant les diff\u00e9rents traitements n\u00e9cessaires, et comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, les textes \u00e0 faire appara\u00eetre sont renseign\u00e9s directement dans le JavaScript.<\/p>\n\n\n\n

La premi\u00e8re fonction, DetecteNavigateur()<\/code>, est l\u00e0, comme son nom l\u2019indique, pour d\u00e9tecter le navigateur du visiteur de la page et renseigner automatiquement des variables qui seront utilis\u00e9es plus tard pour faire quelques ajustement selon le type du navigateur d\u00e9tect\u00e9. Ce genre de fonction n\u2019est plus n\u00e9cessaire de nos jours, car tous (ou presque) les navigateurs modernes fonctionnent de la m\u00eame fa\u00e7on (ou de fa\u00e7on tr\u00e8s proche) au niveau du JS.<\/p>\n\n\n\n

Ensuite viens la classe CreationFenetre<\/code>, qui poss\u00e8de 4 m\u00e9thodes :<\/p>\n\n\n\n

– measureIt()<\/code> : permet de mesurer la taille exacte du tooltip (utile pour son positionnement par rapport aux bords de la fen\u00eatre de navigation)<\/p>\n\n\n\n

– writeIt()<\/code> : permet de changer le texte \u00e0 l\u2019int\u00e9rieur du tooltip<\/p>\n\n\n\n

– blendIn()<\/code> et fadeIn()<\/code> : ces deux fonctions permettaient de faire appara\u00eetre le tooltip de mani\u00e8re progressive, mais aucune des deux n\u2019est encore fonctionnelle, car elles utilisent des propri\u00e9t\u00e9s et m\u00e9thodes n\u2019existant plus dans les navigateurs modernes<\/p>\n\n\n\n

Il y a ensuite d\u2019autres fonctions dont les plus importantes sont :<\/p>\n\n\n\n

– DetecteMouvementSouris()<\/code> (le nom de cette fonction est suffisamment explicite pour que je n\u2019ai pas \u00e0 pr\u00e9ciser sa tache)<\/p>\n\n\n\n

– PositionneFenetre()<\/code> (la m\u00eame)<\/p>\n\n\n\n

– AfficheTexte()<\/code>, cette fonction a pour r\u00f4le de changer le contenu du tooltip.<\/p>\n\n\n\n\n\n\n\n

Fonctionnement du script<\/h3>\n\n\n\n

Le script fonctionne sur le principe suivant :<\/p>\n\n\n\n

– une fonction (AfficheTexte<\/code>) d\u00e9tecte le survol d\u2019un lien, et modifie le contenu du tooltip et met un flag \u00e0 true<\/p>\n\n\n\n

– une autre (DetecteMouvementSouris<\/code>) d\u00e9tecte le mouvement de la souris sur l\u2019enti\u00e8ret\u00e9 de la page, et si le flag est lev\u00e9, affiche le tooltip et le place en fonction du pointeur de la souris<\/p>\n\n\n\n

Mon remake<\/h2>\n\n\n\n

Comme \u00e0 mon habitude, les information \u00e0 utiliser dans le script sont plac\u00e9s dans un data-attribute.<\/p>\n\n\n\n

Autre changement par rapport \u00e0 l\u2019original, le tooltip et les eventListeners sont tous rajout\u00e9s enti\u00e8rement via JS (dans l\u2019original, la div du tooltip est pr\u00e9sente dans le HTML et les eventListeners sont pr\u00e9cis\u00e9s via attributs sur les liens).<\/p>\n\n\n\n

J\u2019ai besoin de deux fonctions utilitaires :<\/p>\n\n\n\n

– followMouse<\/code>, qui sert \u00e0 mettre \u00e0 jour la position du tooltip<\/p>\n\n\n

\nfunction followMouse(e) {\n    tooltip.style.top = getTooltipY(e.pageY, tooltip.offsetHeight, window.visualViewport.height) + 'px';\n    tooltip.style.left = (e.pageX+4) + 'px';\n}\n<\/pre><\/div>\n\n\n
– getTooltipY<\/code>, qui permet de calculer la cordonn\u00e9e verticale du tooltip, en prenant en compte la hauteur de la fen\u00eatre et du tooltip lui-m\u00eame, pour qu’il reste toujours visible<\/p>\n\n\n
\nfunction getTooltipY(mouseY, tooltipHeight, windowHeight) {\n    var tooltipY = mouseY + 21;\n\n    if( (tooltipHeight + mouseY + 21) >= windowHeight) {\n        tooltipY = windowHeight - tooltipHeight;\n    }\n\n    return tooltipY;\n}\n<\/pre><\/div>\n\n\n
Si la fonction de suivi de souris est s\u00e9par\u00e9e, c\u2019est que j\u2019ai fait le choix d\u2019attacher et de d\u00e9tacher le listener.<\/p>\n\n\n\n
En ce qui concerne les param\u00e8tres envoy\u00e9 \u00e0 getTooltipY<\/code>, j\u2019utilise les attributs suivants :<\/p>\n\n\n\n
– l\u2019attribut pageY<\/code><\/a> de l\u2019\u00e9v\u00e9nement pour mouseY<\/code><\/p>\n\n\n\n
– l\u2019attribut offsetHeight<\/a><\/code> de la div du tooltip pour tooltipHeight<\/code><\/p>\n\n\n\n
– l\u2019attribut height<\/code> de l\u2019objet visualViewport<\/a><\/code> de la fen\u00eatre pour windowHeight<\/code>, qui permet d’avoir la hauteur r\u00e9elle de la zone d’affichage, sans prendre en compte l’\u00e9ventuelle barre de d\u00e9filement<\/p>\n\n\n\n
Vient ensuite le c\u0153ur du script, une boucle sur tous les \u00e9l\u00e9ments \u00e0 \u00ab\u00a0tooltiper\u00a0\u00bb, pour leur attacher deux eventListener sur les \u00e9v\u00e9nements mouseover et mouseout<\/p>\n\n\n
\ndocument.querySelectorAll('a.tooltip').forEach(el => {\n    el.addEventListener('mouseover', (e) => {\n        tooltip.innerText = e.target.dataset.tooltip;\n        \n        tooltip.style.top = getTooltipY(e.pageY, tooltip.offsetHeight, window.visualViewport.height) + 'px';\n        tooltip.style.left = (e.pageX+4) + 'px';\n        tooltip.style.visibility = 'visible';\n\n        e.target.addEventListener('mousemove', followMouse);\n    });\n    \n    el.addEventListener('mouseout', (e) => {\n        tooltip.style.visibility = 'hidden';\n        e.target.removeEventListener('mousemove', followMouse);\n    });\n});\n<\/pre><\/div>\n\n\n
Pour une d\u00e9monstration du script complet, rendez-vous ici<\/a>.<\/p>\n\n\n\n
\n\n\n\n
J’esp\u00e8re encore une fois vous avoir appris quelque chose qui vous servira dans le futur, et vous dis \u00e0 bient\u00f4t \ud83d\udc4b .<\/p>\n","protected":false},"excerpt":{"rendered":"
J\u2019ai d\u00e9cid\u00e9 cette semaine de me pencher sur le script de tooltip pr\u00e9sent\u00e9 sur le site de gloubiweb. Dans une premi\u00e8re partie je pr\u00e9senterai rapidement le fonctionnement du script actuel, et dans une deuxi\u00e8me, je vous indiquerai comment recr\u00e9er (quasi) … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[51,56],"class_list":["post-1133","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-gloubituto","tag-vanillajs"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-ih","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1108,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/10\/gloubi-tuto-menu-avec-description-du-lien\/","url_meta":{"origin":1133,"position":0},"title":"Gloubi tuto – menu avec description du lien","author":"geekc","date":"10\/02\/2023","format":false,"excerpt":"Voici venu le temps d\u2019un nouveau gloubi tuto sur un autre script de menu. Aujourd\u2019hui, nous allons nous attaquer au menu interactif avec description du lien. Fonctionnement du script Le menu est mis en forme avec un simple tableau \u00e0 une seule colonne, avec un case vide en pied de\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1085,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","url_meta":{"origin":1133,"position":1},"title":"Gloubi tuto – texte changeant de couleur","author":"geekc","date":"27\/01\/2023","format":false,"excerpt":"Cette fois-ci encore, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 un autre gloubi script d\u2019effet sur texte, le texte changeant de couleur. Une fois de plus, d\u00fb \u00e0 l\u2019\u00e9volution des technologies, plus besoin de JavaScript pour obtenir un r\u00e9sultat identique (ou en tout cas tr\u00e8s proche). Fonctionnement du script On indique au\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1074,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/","url_meta":{"origin":1133,"position":2},"title":"Gloubi script – texte avec un arri\u00e8re-plan d\u00e9filant","author":"geekc","date":"13\/01\/2023","format":false,"excerpt":"Aujourd\u2019hui nouveau tuto sur un gloubi script d\u2019effet sur texte. Cette fois ci, il s\u2019agit de texte avec arri\u00e8re-plan d\u00e9filant. Principe du script Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire. Il fonctionne selon le principe de calques\u00a0: au-dessus du calque de\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":1133,"position":3},"title":"Gloubi script – un cadre clignotant","author":"geekc","date":"24\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nous allons nous attaquer \u00e0 un script pr\u00e9sent\u00e9 chez notre gloubi rival qui pourra vous \u00eatre tr\u00e8s utile pour mettre en avant n\u2019importe quel contenu sur, par exemple, la magnifique page d\u2019accueil de votre tout aussi sublime site\u00a0: le cadre clignotant. Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1050,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/30\/gloubi-tuto-menu-interactif-deroulant\/","url_meta":{"origin":1133,"position":4},"title":"Gloubi tuto – menu interactif d\u00e9roulant","author":"geekc","date":"30\/12\/2022","format":false,"excerpt":"Cette semaine, attaquons-nous \u00e0 un autre script de menu pr\u00e9sent\u00e9 chez notre gloubi adversaire. Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes. Fonctionnement Le menu produit par ce script se pr\u00e9sente sous la forme d\u2019un tableau dans un tableau (je parle l\u00e0 des\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":976,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/","url_meta":{"origin":1133,"position":5},"title":"Gloubi tuto – un menu interactif Hello Kitty","author":"geekc","date":"02\/12\/2022","format":false,"excerpt":"Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty. Pr\u00e9sentation et explication de l\u2019existant Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi. Le\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1133"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1133\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}