J’ai décidé cette semaine de me pencher sur le script de tooltip présenté sur le site de gloubiweb.

Dans une première partie je présenterai rapidement le fonctionnement du script actuel, et dans une deuxième, je vous indiquerai comment recréer (quasi) à l’identique cet ancien script.

Présentation de du code existant

Le script actuel se compose de plusieurs fonctions et classes assurant les différents traitements nécessaires, et comme pour d’autres gloubi scripts déjà présentés, les textes à faire apparaître sont renseignés directement dans le JavaScript.

La première fonction, DetecteNavigateur(), est là, comme son nom l’indique, pour détecter le navigateur du visiteur de la page et renseigner automatiquement des variables qui seront utilisées plus tard pour faire quelques ajustement selon le type du navigateur détecté. Ce genre de fonction n’est plus nécessaire de nos jours, car tous (ou presque) les navigateurs modernes fonctionnent de la même façon (ou de façon très proche) au niveau du JS.

Ensuite viens la classe CreationFenetre, qui possède 4 méthodes :

– measureIt() : permet de mesurer la taille exacte du tooltip (utile pour son positionnement par rapport aux bords de la fenêtre de navigation)

– writeIt() : permet de changer le texte à l’intérieur du tooltip

– blendIn() et fadeIn() : ces deux fonctions permettaient de faire apparaître le tooltip de manière progressive, mais aucune des deux n’est encore fonctionnelle, car elles utilisent des propriétés et méthodes n’existant plus dans les navigateurs modernes

Il y a ensuite d’autres fonctions dont les plus importantes sont :

– DetecteMouvementSouris() (le nom de cette fonction est suffisamment explicite pour que je n’ai pas à préciser sa tache)

– PositionneFenetre() (la même)

– AfficheTexte(), cette fonction a pour rôle de changer le contenu du tooltip.

Fonctionnement du script

Le script fonctionne sur le principe suivant :

– une fonction (AfficheTexte) détecte le survol d’un lien, et modifie le contenu du tooltip et met un flag à true

– une autre (DetecteMouvementSouris) détecte le mouvement de la souris sur l’entièreté de la page, et si le flag est levé, affiche le tooltip et le place en fonction du pointeur de la souris

Mon remake

Comme à mon habitude, les information à utiliser dans le script sont placés dans un data-attribute.

Autre changement par rapport à l’original, le tooltip et les eventListeners sont tous rajoutés entièrement via JS (dans l’original, la div du tooltip est présente dans le HTML et les eventListeners sont précisés via attributs sur les liens).

J’ai besoin de deux fonctions utilitaires :

– followMouse, qui sert à mettre à jour la position du tooltip

function followMouse(e) {
    tooltip.style.top = getTooltipY(e.pageY, tooltip.offsetHeight, window.visualViewport.height) + 'px';
    tooltip.style.left = (e.pageX+4) + 'px';
}

– getTooltipY, qui permet de calculer la cordonnée verticale du tooltip, en prenant en compte la hauteur de la fenêtre et du tooltip lui-même, pour qu’il reste toujours visible

function getTooltipY(mouseY, tooltipHeight, windowHeight) {
    var tooltipY = mouseY + 21;

    if( (tooltipHeight + mouseY + 21) >= windowHeight) {
        tooltipY = windowHeight - tooltipHeight;
    }

    return tooltipY;
}

Si la fonction de suivi de souris est séparée, c’est que j’ai fait le choix d’attacher et de détacher le listener.

En ce qui concerne les paramètres envoyé à getTooltipY, j’utilise les attributs suivants :

– l’attribut pageY de l’événement pour mouseY

– l’attribut offsetHeight de la div du tooltip pour tooltipHeight

– l’attribut height de l’objet visualViewport de la fenêtre pour windowHeight, qui permet d’avoir la hauteur réelle de la zone d’affichage, sans prendre en compte l’éventuelle barre de défilement

Vient ensuite le cœur du script, une boucle sur tous les éléments à « tooltiper », pour leur attacher deux eventListener sur les événements mouseover et mouseout

document.querySelectorAll('a.tooltip').forEach(el => {
    el.addEventListener('mouseover', (e) => {
        tooltip.innerText = e.target.dataset.tooltip;
        
        tooltip.style.top = getTooltipY(e.pageY, tooltip.offsetHeight, window.visualViewport.height) + 'px';
        tooltip.style.left = (e.pageX+4) + 'px';
        tooltip.style.visibility = 'visible';

        e.target.addEventListener('mousemove', followMouse);
    });
    
    el.addEventListener('mouseout', (e) => {
        tooltip.style.visibility = 'hidden';
        e.target.removeEventListener('mousemove', followMouse);
    });
});

Pour une démonstration du script complet, rendez-vous ici.

J’espère encore une fois vous avoir appris quelque chose qui vous servira dans le futur, et vous dis à bientôt 👋 .