Popup sur Div (Position left)

**inspecteur rick** · 28/06/2018, 08h57

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Nom : Sans titre.png
Affichages : 529
Taille : 25,9 Ko

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

Merci d'avance

**eleydet** · 29/06/2018, 08h23

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Invité · 29/06/2018, 09h01

Bonjour,

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

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

Le positionnement ne requiert pas JavaScript, puisqu'il se fait simplement en CSS.

Des infobulles en CSS3 (démo)

**psychadelic** · 29/06/2018, 09h39

@ 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...

Invité · 29/06/2018, 10h05

1- Les liens sont de la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

...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 :

Sélectionner tout - Visualiser dans une fenêtre à part

...<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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

en

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**psychadelic** · 29/06/2018, 10h35

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 )

Invité · 29/06/2018, 11h03

Non plus.

Pas besoin de JavaScript pour ça.

Il suffit encore de modifier le CSS.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**inspecteur rick** · 29/06/2018, 11h12

Merci pour vos réponses

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

Invité · 29/06/2018, 11h20

1- Déjà, tu as une erreur ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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 !)

**inspecteur rick** · 29/06/2018, 11h25

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.

Invité · 29/06/2018, 11h56

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

Bon.
J'ai trouvé une astuce :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**inspecteur rick** · 29/06/2018, 12h04

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 ?

**psychadelic** · 29/06/2018, 12h09

Envoyé par psychadelic

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pour ce post ?

Invité · 29/06/2018, 12h18

OK.

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

: 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

!

Invité · 29/06/2018, 12h42

@inspecteur rick

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

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).

"jquery tooltip html content"

tooltipster (voir Smart positioning)

**psychadelic** · 29/06/2018, 13h07

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

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

**NoSmoking** · 29/06/2018, 15h31

Bonjour,

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>.

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 ».

**inspecteur rick** · 29/06/2018, 19h32

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

Invité · 29/06/2018, 20h02

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.

**inspecteur rick** · 02/07/2018, 19h48

J'ai réussi sans plugin

CSS + Javascript !!

Merci pour vos aides respectives

Popup sur Div (Position left)

JavaScript

Discussions similaires

Partager

Partager