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

**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 ?

**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 !)

Popup sur Div (Position left)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager