Tooltip Jquery ajouter la collision en fonction de la position de l'image
Bonjour j'utilise un Tooltip Jquery permettant de faire un zoom sur une image avec une description qui marche très bien. Mais je voudrais également ajouter la gestion des collisions en fonction de la position de l'image.
J'ai d'ores et déjà consulté un problème similaire au mien mais je n'ai pas trouvé une réponse à mon problème.
http://www.developpez.net/forums/d12...ment-position/
Ci-joint le code si quelqu'un peut m'aider je lui en serais reconnaissant car étant débutant en Javascript cela fait 3 semaines que je cherche merci à vous
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
| // Load this script once the document is ready
$(document).ready(function () {
// Get all the thumbnail
$('div.thumbnail-item').mouseenter(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// Set the z-index of the current item,
// make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'});
}).mousemove(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// This line causes the tooltip will follow the mouse pointer
$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
}).mouseleave(function() {
// Reset the z-index and hide the image tooltip
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});
}); |
