Ajouter une tooltip à un élément précis

Bonjour, j'utilise actuellement cette tooltip avec jQuery sur mon forum (forumactif). J'ai installé le script indiqué comme il fallait et tout marche parfaitement.

Je sollicite votre aide aujourd'hui pour ajouter cette tooltip à certains éléments que je n'ai pas la possibilité de toucher via les templates. En effet, j'ai réussi à faire en sorte que lorsqu'un membre poste un message, des informations de son profil s'affichent juste au-dessus de ce message et ce, grâce à la pseudo-classe :nth-child.

Ce que je cherche à faire, c'est rajouter un attribut title différent pour chaque élément doté de :nth-child et que la tooltip donnée plus haut se mette en marche en passant la souris sur chaque élément. Sur mon forum j'ai pour l'instant deux classes concernées : .post-profile:nth-child(1) et .post-profile:nth-child(2).

Je préviens d'avance que je n'ai quasi aucune connaissance en JS donc il me faudrait un script complet si possible... Merci d'avance pour votre aide et bonne journée
Modifié par holen (27 Aug 2018 - 13:56)

Je me permets d'uper

UP

UP

Bonjour
Désolé, mais je ne sais pas ce que c'est qu'un tooltip et j'ai abandonné jQuery
Je pense ne pas être le seul dans ce cas (du moins en ce qui concerne les tootips) ce qui doit être la raison pour laquelle vous n'avez pas reçu de réponse.
Ce forum est généralement très réactif, il est très rare qu'une question n'ait pas de répose, il faudrait peut être la reformuler différemment.

Bonjour, merci pour votre réponse. Le terme anglais tooltip correspond en réalité à une info-bulle

Est-ce quelque chose de ce genre que vous voulez?
État normal

quand on clique sur le mot "protéonique"


Si on clique à nouveau sur le "mot clef" ou sur la bulle, on revient à l'état normal.
(la petite croix dans la bulle est là pour faire comprendre au lecteur qu'il peut fermer la bulle en cliquant dessus, elle n'a pas d'action en soi)

Le même mécanisme pourrait se faire par passage de souris (survol) plutôt que clic, sauf que de plus en plus de gens utilisent des tablettes ou des téléphones qui n'ont pas le concept de "survol".
Le contexte: https://tests.osirisnet.net/news/n_08_18.htm?fr 3ème article, celui intitulé "Le plus ancien (?) fromage du monde".

La réalisation de ce gadget est un peu complexe.
Je ne peux pas vous fournir le code réel de cet exemple, car il s'agit de script qui appellent d'autres scripts et de CSS qui tient compte de l'environnement.

En gros:
- le mot clef est contenu dans une balise

<dfn data-note="footnote1" onclick="showHideNote(this)">protéomique</dfn>

- la bulle est contenu dans une balise

<aside class="footnote" id="footnote1" onclick="hide(this)">
  <p>La protéomique désigne la science qui étudie les protéomes, c'est-à-dire l'ensemble des protéines d'une cellule, d'un organite, d'un tissu, d'un organe ou d'un organisme à un moment donné et sous des conditions données. Wikipedia</p>
  </aside>

- Le css (simplifié) de la balise <aside class="footnote">

aside.footnote {
    display:none;
    position:absolute;
    max-width:30%;
    left:0;
    right:0;
    margin:auto;
}
aside.footnote.active {display:table;}

- Le script showHideNote() (simplifié)

function showHideNote(element) {
	/* quand on clique sur un appel de note, la note est montrée/cachée selon son état courant */
	var noteId = element.getAttribute('data-note'), footnote = document.getElementById(noteId);
	if(!footnote) return; /* pas trouvé la bulle */
/* si trouvé met le haut de la bulle au dessous de la balise <dfn> */
	footnote.style.top = (element.offsetTop + element.offsetHeight - 3) + 'px';
	footnote.classList.toggle('active');
}

- Le script hide(element)

element.classList.remove('active');

Encore une fois, j'ai arrangé ce code pour supprimer les adhérences avec le contexte, je ne garantis donc pas que ça fonctionne tel quel.

Point à noter: je n'ai pas modifié la position horizontale de la bulle pour l'asservir à celle du mot clef. Ce serait assez compliqué d'éviter que, en fonction de la position horizontale du mot clef, la bulle déborde à gauche ou à droite du cadre de la zone d'affichage.
En limitant la largeur de la bulle à 30% de la largeur de la zone et en la centrant, je suis sûr de ne pas déborder.

Je ne doute pas qu'il existe des solutions plus "simples" à ce problème, et sans doute y a-t-il quelque part du code tout fait réutilisable.

Bon courage!!
Modifié par PapyJP (04 Sep 2018 - 11:49)