afficher une popup juste au-dessus de l'endroit cliqué

Version imprimable

14/08/2017, 11h01
Claudine

afficher une popup juste au-dessus de l'endroit cliqué

Bonjour à tous,
j'ai un tableau chargé de nombreuses données provenant d'une bdd et à chaque ligne du tableau , j'ai deux colonnes sur lesquelles un clic fait apparaître une popup donnant pas mal de renseignements.
Cette popup s'affiche toujours selon la valeur : exemple top:500px; soit plus ou moins au milieu de l'écran. Tout est correct, mais j'aimerais une position plus précise.
Est-il possible d'imposer à top une variable qui correspondrait à la position (y) soit ($y) du clic pour que la popup s'affiche juste à cet endroit de la ligne du tableau?
Si oui, pouvez-vous m'aider?
remerciements
Claudine
14/08/2017, 12h07
LearningBoy

Pop-up et tableau

Bonjour Claudine,

Vous souhaiteriez afficher une popup non pas à un endroit fixe au milieu de l'écran, mais plutôt au dessus de la ligne du tableau en question.

Personnellement pour ajouter des popups dans mon application, j'utilise la librairie Bootstrap, qui permet de choisir précisément où afficher la popup par rapport à un élément donnée : au haut, à droite, à gauche, etc.

Est-ce que vous utilisez une librairie pour vos popups ?

Cordialement,

Simon, auteur sur Awesome Angular.

Bonjour,

Des infobulles aux passages de la souris, avec l'attribut title, résoudraient-ils votre problème?

Exemple d'infobulle :
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>

15/08/2017, 08h58
Claudine

afficher une popup juste au-dessus de l'endroit cliqué

Bonjour LearningBoy ,
non, je n'utilise pas de librairie.
Si, ce système permet de résoudre mon problème. C'est OK mais malheureusement, je ne suis pas assez experte pour appliquer le Bootstrap d'autant plus que tout est en anglais et je n'y comprend plus grand chose.
Je reprend ma question que je n'ai pu résoudre seule:"Est-il possible d'imposer à top une variable qui correspondrait à la position (y) soit ($y) du clic pour que la popup s'affiche juste à cet endroit de la ligne du tableau?" car si j'assigne à :

Code:

top:($y)px;

, il semble qu'il ne prend pas cette variable puisqu'il affiche toujours la popup en haut de l'écran(valeur0).
remerciements pour votre aide.
Claudine
15/08/2017, 12h00
LearningBoy

Règle CSS position
Bonjour,

Pour placer votre popup par rapport à un élément de votre page, il me semble que vous devez appliquez sur l'élément parent de la popup la règle CSS suivante :
Code:

1 2 3 4 5 6 7 8 .bloc-parent { position : relative; } .popup { position : absolute; top : 5px; left : 5px; }
Dans l'exemple de code ci-dessus, la popup est positionné relativement à son bloc parent. Avez-vous déjà essayé cette règle CSS ?

Cordialement,

Simon, auteur sur Awesome Angular.
16/08/2017, 10h55
eleydet

Bonjour Claudine,

Les infobulles ne vous donnent pas satisfaction?

Je proposerais bien volontiers un exemple de code, mais votre question n'est pas très claire : Vous voulez une petite fenêtre quand on clique sur une case, sur une ligne ou sur une colonne du tableau?
17/08/2017, 12h56
Claudine

afficher une popup juste en-dessous du clique

un tout grand merci, C'est OK, c'était trop simple mais il fallait le savoir.
17/08/2017, 15h51
Claudine

merci à eleydet pour ses propositions d'aide, mais j'ai enfin une solution plus que satisfaisante fournie par LearningBoy
Claudine