Popup sur Div (Position left)

Version imprimable

28/06/2018, 08h57
inspecteur rick

1 pièce(s) jointe(s)

Popup sur Div (Position left)
Bonjour

Je dois pouvoir ouvrir une "popin" au click sur une phrase (qui se trouve dans une div ) dans un texte. Cette popin doit apparaitre juste au dessus du premier mot de la phrase qui est cliqué.

J'ai créé une div "Popin" avec une position : absolute. Puis je récupère la position left du div, qui contient la phrase qui est cliqué, dont je me sers pour afficher ma "Popin" au bon endroit.
Code:

1 2 3 <div class="content"> Du texte, encore du texte<div class="popin">La phrase sur laquelle doit apparaître le popup</div> puis en encore du texte </div>
Code:

1 2 3 4 5 <script> $('.popin').click(function (event) { var position = $(this).position(); console.log(position.left);}); </script>
J'arrive à récupérer la position du div lorsque celui-ci est sur une ligne. Mais lorsque que la phrase est sur deux lignes, la position left de ma div est 0.
J'ai compris le problème, grâce l'inspecteur de firefox, lorsque la phrase est sur deux lignes, le div "englobe" les deux lignes sur lesquelles se trouve la phrase.

Pièce jointe 392212

Comment faire pour régler le problème. Une idée ?

Merci d'avance :)
29/06/2018, 08h23
eleydet
Bonjour,

Il y a peut-être plus simple. Une infobulle est une petite fenêtre, donnant une information sur un élément lorsque le curseur de la souris reste positionnée sur cet élément quelques instants. Elle peut être créée facilement à l'aide de de l'attribut title.
Code:

1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p title="Deux couleurs">Le ciel est bleu et l'herbe verte.</p> </body> </html>
29/06/2018, 09h01
Invité
Bonjour,

Citation:

...Cette popin doit apparaitre juste au dessus du premier mot de la phrase qui est cliqué...

Oui, la solution s'appelle infobulle (ou tooltip). -> :recherch:

Le positionnement ne requiert pas JavaScript, puisqu'il se fait simplement en CSS.
- Des infobulles en CSS3 (démo)
29/06/2018, 09h39
psychadelic

@ jreaux62 dans ton exemple en démo, tes info bulles ne sefont que pour des textes à un seul mot, pas quand il y en a plusieurs dont la deuxième partie est placée sur la ligne suivante, et j'ai essayé mais il les force à passer entierement sur la ligne suivante, ce qui fait qu'on ne peut pas tester son pb avec.

D"ailleurs, si le texte à popup est sur 2 lignes donc découpé en deux partie l'une sur la droite et l'autre à gauche, ou placer l'info bulle ?
parce que forcément si elle est au milieu, elle ne sera ni sur l'une , ni sur l'autre... 8O
29/06/2018, 10h05
Invité
1- Les liens sont de la forme :

Code:

...In tempus nisi <a href="#" class="tooltip">vulputate<span><b>Titre optionnel</b><br>Une infobulle grise en CSS3.</span></a>...

Pour avoir un bout de phrase, il suffit de le mettre dans le <a> :

Code:

...<a href="#" class="tooltip">In tempus nisi vulputate<span><b>Titre optionnel</b><br>Une infobulle grise en CSS3.</span></a>...

Par contre, ça se met sur une seule ligne...

2- Il faut modifier : (@psychadelic : c'est ce qui t'a manqué dans ton test)
Code:

1 2 3 .tooltip { ... display: inline-block;
en
Code:

1 2 3 .tooltip { ... display: inline;
- Le texte peut alors passer sur plusieurs lignes,
- Et l'info-bulle s'affiche correctement.
3- Si on ne se soucie pas des anciennes versions d'I.E. (<7), on peut remplacer le lien <a> par un simple <span> :

Code:

...<span class="tooltip">In tempus nisi vulputate<span><b>Titre optionnel</b><br>Une infobulle grise en CSS3.</span></span>...

Code:

1
2
3
4
5
6
7
8
9
      $('.popin').click(function (event) {
 
        let $Elem = $('<span>');
        $(this).before($Elem);
        let position = $Elem.position();
 
        $Elem.remove();
        console.log(position);
      });

;)

pour répondre strictement à la question ( juste au dessus du premier mot )

29/06/2018, 11h03
Invité
Non plus. :aie:
Pas besoin de JavaScript pour ça.

Il suffit encore de modifier le CSS.
Code:

1 2 3 4 5 .tooltip span { ... left: ...%; width: ...px; margin-left: -...px;
On peut aussi modifier la position de la petite flèche (sous le popin) :
Code:

1 2 3 4 .tooltip span:before, .tooltip span:after { ...

Merci pour vos réponses

J'ai déjà essayé ce genre de solution grâce à NoSomking

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Image au survol</title>
<meta name="Author" content="NoSmoking">
<style>
span.infobulle {
  position: relative;
  background: #EFEFEF;
  cursor: pointer;
  displa: inline-block;
}
span.infobulle span {
  display: none;
  position: absolute;
}
span.infobulle img {
  display: block;
}
span.infobulle:hover span {
  display: inline-block;
  top: 0;
  left: 50%;
  border: 1px solid #880;
  transform: translate(-50%, -100%);
}
</style>
</head>
<body>
<h1>Image au survol</h1>
<p>Ceci est un texte qui comporte une <span class="infobulle">image<span><img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt=""></span></span> apparaissant au survol.</p>
<p>Un autre texte comportant également une <span class="infobulle">image<span><img src="https://www.developpez.net/forums/avatars/285162-danielhagnoul.gif" alt=""></span></span> apparaissant au survol.</p>
</body>
</html>

Ça fonctionne comme la solution proposée mais j'y ai vu plusieurs problèmes :
1) Lorsque contenu du popup a un width plus grand que le width du span sur lequel apparait la popup, la popup garde la width du span et le contenu déborde.
1) Lorsque la popup est trop grande pour la taille de l'écran, je dois essayer de la repositionner (elle n'apparait donc plus au dessus du groupe de mot). Et si elle est trop grande même en la repositionnant, je dois redimensionner le contenu de la popup pour que qu'elle rentre sur l'écran sans scroll.

J'ai réussi à m'en sortir comme ci-dessous (j'ai mis le cas où le contenu de la popup est une image)

Code:

1
2
3
Le début du texte
<span id="trad12" class="popin image">le groupe de mot sur lequel doit apparaître la popup</span>. La suite du texte
<div id="PopupTrad"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$('.popin').click(function (event) {
	var id_trad =  $(this).attr("id").substr(4,$(this).attr("id").length-3);
	var img_trad = trans[id_trad]["img_trad"];
	var position = $(this).position();
	var position_span = position.left;
	var width_window = $(window).width();
	var marge = $(".content").css("margin-left").substr(0,$(".content").css("margin-left").length-2);
 
	if (img_trad != '') {
		$("#PopupTrad").html('<div id="content_trad"><div class="img_trad" style="display: block"><img src="../Images/" '+ img_trad + ' /></div></div>'); 
		var image_trad = new Image();
		image_trad.src = '../Images/' + img_trad;
 
		image_trad.onload = function () {
				var popup_width = $("#PopupTrad").width();
				var available_width = (width_window - 2*marge - position_span);
				if (available_width - popup_width <= 0) {
					if ( (width_window - 2*marge) - popup_width <=0 ) {
							$("#PopupTrad .img_trad").children().css("width", width_window - 4*marge + "px"); 
							position_span =  marge;
					}
					else {
							position_span = position_span-(popup_width-available_width)- marge;			
					}
						}
				$("#PopupTrad").css("left", position_span + "px");
				$("#PopupTrad").css("top", position.top-$("#PopupTrad").height() + "px");
				$("#PopupTrad").show();
		};
	}
 
})

Mon soucis reste sur le cas du groupe de mot sur 2 lignes...
La seule solution que j'ai trouvée est de mettre mon span en inline-block ce qui empêche d'avoir le groupe de mot sur deux lignes mais c'est pas esthétique...

29/06/2018, 11h20
Invité
1- Déjà, tu as une erreur ici :

Code:

$("#PopupTrad").html("<div id="content_trad">........");

2- Ensuite, si la popin contient 15km de textes/images :
- une infobulle n'est effectivement pas adaptée.
- une popin juste au dessus du mot non plus ! (à moins d'y mettre un scroll? Mais Bonjour l'ergonomie !)
29/06/2018, 11h25
inspecteur rick

Oui j'ai pas copié tout le code, j'ai fait une erreur de guillemets au copie-coller.

Non il y a soit une image, soit un groupe de mot avec une image. Et comme je ne veux pas de scroll, je redimensionne l'image pour qu'elle s'adapte à la taille de l'écran.

Citation:

...Mon soucis reste sur le cas du groupe de mot sur 2 lignes......

Bon.
J'ai trouvé une astuce : 8-)

Code:

1
2
3
4
5
  var content_html = $(this).html();
  $(this).html(' '); // on remplace provisoirement par un espace
  var position = $(this).position(); // position de cet espace : on sera donc sur le premier mot !
  var position_span = position.left;
  $(this).html(content_html); // on remet le contenu

29/06/2018, 12h04
inspecteur rick

Ah oui c'est malin !!!

Et le repositionnement et/ou redimensionnement de ma popup en fonction de la taille de l'écran que je gère en javascript, tu dis que je peux le faire en full css ?

Citation:
Envoyé par psychadelic
Code:

1 2 3 4 5 6 7 8 9 $('.popin').click(function (event) { let $Elem = $('<span>'); $(this).before($Elem); let position = $Elem.position(); $Elem.remove(); console.log(position); });
;)

pour répondre strictement à la question ( juste au dessus du premier mot )
et alors ?, c'est à peu prés la même astuce, sauf que je n'efface pas le texte, je place juste un span vide juste avant que j'efface ensuite.

Et j'aimerai aussi savoir pourquoi je me prends un :moinsser: pour ce post ? :roll::roll::roll:

OK.

J'ai aussi trouvé cette solution (moins "agressive" que supprimer/remettre le texte !).
Code:

1 2 3 4 5 6 7 8 9 10 $(this).prepend("<ins></ins>"); // on ajoute une balise vide var position = $(this).find("ins").position().top; // on note la position de ins : on aura donc la position du premier mot ! var position_top = position.top; var position_left = position.left; $(this).find("ins").remove(); // on supprime la balise var width_window = $(window).width(); $("#PopupTrad").css("left", position_left + "px"); $("#PopupTrad").css("top", position_top - $("#PopupTrad").height() + "px");
Ca revient effectivement à ce que tu avais donné (*)

(*) le :moinsser: : car tu n'as pas pris la peine de mettre des explications... qui aurait permis de comprendre, et de s'y intéresser au premier coup d'oeil !
Et surtout parce que ça n'avait pas de rapport avec le code du tooltip dont on parlait : ton code est tombé comme un cheveu dans la soupe...

Donc, après coup : c'était tout-à-fait judicieux et pertinent !
Je l'ai donc enlevé et remplacé par un :plusser: ! :kiss:

29/06/2018, 12h42
Invité
@inspecteur rick

1- Pour ton problème de dimension (popin, image contenue), il suffit (à priori) de mettre :
Code:

1 2 3 #PopupTrad, #PopupTrad img { max-width:100%; }
2- Par contre, je reviens sur le positionnement : je continue à penser que le "tooltip" est une solution efficace.
L'intérêt du Javascript sera de :
- créer le span nécessaire
- y mettre le code généré via JavaScript (code de l'image,...)
3- Quant au fait de le positionner sur le 1er mot : et si ce mot est tout à droite de la fenêtre ? :aie:

4- Il me semble qu'il existe des plugin de "tooltip" qui règlent ce problème (en décalant correctement l'infobulle, en fonction de sa position dans la fenêtre).
:recherch: "jquery tooltip html content"
- tooltipster (voir Smart positioning)
29/06/2018, 13h07
psychadelic

Citation:

Envoyé par jreaux62

4- Il me semble qu'il existe des plugin de "tooltip" qui règlent ce problème (en décalant correctement l'infobulle, en fonction de sa position dans la fenêtre).

Oui, un peu plus de 1500, pour l'instant :mouarf:

https://github.com/search?l=JavaScri...e=Repositories

(et en ne comptant que ceux présents sur GitHub )

[Edit : ] + 122 pour ceux en CSS uniquement.... https://github.com/search?l=CSS&q=to...e=Repositories
29/06/2018, 15h31
NoSmoking

Bonjour,

Citation:

Envoyé par inspecteur rick

1) Lorsque contenu du popup a un width plus grand que le width du span sur lequel apparait la popup, la popup garde la width du span et le contenu déborde.

il suffit simplement d'ajouter un white-space:nowrap au sélecteur span.infobulle span ainsi tu gères les retours ligne avec un simple <br>.

Citation:

Envoyé par inspecteur rick

1) Lorsque la popup est trop grande pour la taille de l'écran, je dois essayer de la repositionner ...

dans ce cas on n'est plus dans le cadre de l'utilisation d'une « infobulle ».
29/06/2018, 19h32
inspecteur rick

Je n'ai pas trop envie de passer par un plugin déjà fait et qui fait pleins de trucs dont j'ai pas besoin.
Et j'aimerais savoir faire surtout :)

Je suis un peu perdu...

J'ai compris que le javascript est indispensable pour gérer le contenu de ma popup.
Pour le positionnement et/ou redimensionnement, j'ai bidouillé avec javascript (voir mon 2e message)

J'ai cru comprendre que c'était possible en css ? Je me trompe ?

Je rappelle les contraintes lol
1) Le popup doit apparaître au-dessus du groupe de mot sur lequel j'ai cliqué (pas obligé d être au dessus du premier mot finalement)
2) La largeur de la popup doit pouvoir dépasser la largeur du groupe de mot sur lequel j'ai cliqué.
3) Si la largeur de la popup est trop grande (à cause de son contenu) par rapport à la position du groupe de mot et la fin de l'écran, je dois décaler la popup pour quelle s'affiche complètement
Et le décalage suffit pas car la largeur de la popup est trop grande par rapport à l'écran, je dois redimensionner le contenu de la popup (image)

La solution du tooltip donnée par NoSmoking, psychadelic, jreaux62 fonctionne pour les points 1 et 2
Il reste le 3 point, je reste sur du javascript ?

J'oubliais que dans ma bidouille actuelle, qui fonctionne, j'ai quand même un soucis. Le traitement css par jquery prend un peu de temps, suffisamment pour que je vois furtivement (un flash) la div de ma popup se redimensionner et se déplacer.
En local, c'est transparent mais en ligne je le vois...

Merci de votre aide
29/06/2018, 20h02
Invité

1- Pour le point 3, j'ai donné un début de réponse CSS.

2- Si tu veux apprendre, c'est très bien.
Mais tu seras confronté à un tas de cas particuliers... qu'il te faudra régler un par un.

3- Le plugin que j'ai mis en lien (le 1er trouvé parmi d'autres) répond à la plupart des problématiques.
Inutile de rè-inventer la roue.
02/07/2018, 19h48
inspecteur rick

J'ai réussi sans plugin :)

CSS + Javascript !!

Merci pour vos aides respectives :)