Discussion :

[inspecteur rick]

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.



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

Merci d'avance