Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Don't allow the tooltip to be positioned outside the map's bounds #56

Merged
merged 1 commit into from

4 participants

@jbafford

It's undesirable (at least for us) to have the tooltip appear outside of the bounds of the map, which causes the tooltip to be partially hidden if the map is in an iframe. This patch prevents that by moving the tooltip to the right (or below) the mouse position if its left or top side would otherwise have a negative coordinate.

@KaylanBrunet

thanks for this fix, it helped a lot, but how could we fix the fact that when we zoom with the tooltip, it goes under the map?

@KaylanBrunet

fix it with a z-index in css for what was going under the map

@deviantpixel deviantpixel commented on the diff
jqvmap/jquery.vmap.js
@@ -478,9 +478,17 @@
if (params.showTooltip) {
params.container.mousemove(function (e) {
if (map.label.is(':visible')) {
- map.label.css({
- left: e.pageX - 15 - map.labelWidth,
- top: e.pageY - 15 - map.labelHeight
+ var left = e.pageX - 15 - map.labelWidth;
+ var top = e.pageY - 15 - map.labelHeight;
+
+ if(left < 0)

Just a comment but if you changed the width/hight of the tooltip container, tweak the 0 integer here to make it account for your bigger tooltip. For example mine is 300 pixels wide so it worked better for me to change the left voundary to 100 and the top boundary to 320.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@deviantpixel

Nice patch. I added a comment in the patch about where to adjust the top/left variables if you changed the size of the tooltip box in your map (: Thanks

@manifestinteractive manifestinteractive merged commit fdc26b1 into manifestinteractive:stable
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 11 additions and 3 deletions.
  1. +11 −3 jqvmap/jquery.vmap.js
View
14 jqvmap/jquery.vmap.js
@@ -478,9 +478,17 @@
if (params.showTooltip) {
params.container.mousemove(function (e) {
if (map.label.is(':visible')) {
- map.label.css({
- left: e.pageX - 15 - map.labelWidth,
- top: e.pageY - 15 - map.labelHeight
+ var left = e.pageX - 15 - map.labelWidth;
+ var top = e.pageY - 15 - map.labelHeight;
+
+ if(left < 0)

Just a comment but if you changed the width/hight of the tooltip container, tweak the 0 integer here to make it account for your bigger tooltip. For example mine is 300 pixels wide so it worked better for me to change the left voundary to 100 and the top boundary to 320.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ left = e.pageX + 15;
+ if(top < 0)
+ top = e.pageY + 15;
+
+ map.label.css({
+ left: left,
+ top: top
});
}
});
Something went wrong with that request. Please try again.