diff --git a/css/app.css b/css/app.css
index cafe19774..b54ac70f1 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1047,12 +1047,11 @@ div.typeahead a:first-child {
left: 30px;
}
-.mouse-tooltip {
- opacity:0.5;
- background :#fff;
- margin-left: 20px;
+.tail {
+ position: absolute;
+ background: rgba(255, 255, 255, 0.7);
margin-top: -15px;
- padding:5px;
+ padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
diff --git a/index.html b/index.html
index 08c23a46b..9db659489 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
-
+
diff --git a/js/id/id.js b/js/id/id.js
index 712656cd6..96f4d09d5 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -180,9 +180,9 @@ window.iD = function(container) {
.call(redo ? refreshTooltip : undo_tooltip.hide);
});
- window.onresize = function() {
+ d3.select(window).on('resize.map-size', function() {
map.size(m.size());
- };
+ });
map.keybinding()
.on('a', function(evt, mods) {
diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js
index 6977f2e15..a9fcb830e 100644
--- a/js/id/modes/add_area.js
+++ b/js/id/modes/add_area.js
@@ -12,7 +12,7 @@ iD.modes.AddArea = function() {
controller = mode.controller;
map.dblclickEnable(false)
- .hint('Click on the map to start drawing an area, like a park, lake, or building.');
+ .tail('Click on the map to start drawing an area, like a park, lake, or building.');
map.surface.on('click.addarea', function() {
var datum = d3.select(d3.event.target).datum() || {},
@@ -47,7 +47,7 @@ iD.modes.AddArea = function() {
window.setTimeout(function() {
mode.map.dblclickEnable(true);
}, 1000);
- mode.map.hint(false);
+ mode.map.tail(false);
mode.map.surface.on('click.addarea', null);
mode.map.keybinding().on('⎋.addarea', null);
};
diff --git a/js/id/modes/add_line.js b/js/id/modes/add_line.js
index 60f376181..b83202097 100644
--- a/js/id/modes/add_line.js
+++ b/js/id/modes/add_line.js
@@ -13,7 +13,7 @@ iD.modes.AddLine = function() {
controller = mode.controller;
map.dblclickEnable(false)
- .hint('Click on the map to start drawing an road, path, or route.');
+ .tail('Click on the map to start drawing an road, path, or route.');
map.surface.on('click.addline', function() {
var datum = d3.select(d3.event.target).datum() || {},
@@ -67,7 +67,7 @@ iD.modes.AddLine = function() {
mode.exit = function() {
mode.map.dblclickEnable(true);
- mode.map.hint(false);
+ mode.map.tail(false);
mode.map.surface.on('click.addline', null);
mode.map.keybinding().on('⎋.addline', null);
};
diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js
index 4936f1578..21d6343e0 100644
--- a/js/id/modes/add_point.js
+++ b/js/id/modes/add_point.js
@@ -10,7 +10,7 @@ iD.modes.AddPoint = function() {
history = mode.history,
controller = mode.controller;
- map.tooltip('Click on the map to add a point.');
+ map.tail('Click on the map to add a point.');
map.surface.on('click.addpoint', function() {
var node = iD.Node({loc: map.mouseCoordinates(), _poi: true});
@@ -28,7 +28,7 @@ iD.modes.AddPoint = function() {
};
mode.exit = function() {
- mode.map.hint(false);
+ mode.map.tail(false);
mode.map.surface.on('click.addpoint', null);
mode.map.keybinding().on('⎋.addpoint', null);
};
diff --git a/js/id/modes/draw_area.js b/js/id/modes/draw_area.js
index 88d61d323..cdb966351 100644
--- a/js/id/modes/draw_area.js
+++ b/js/id/modes/draw_area.js
@@ -18,8 +18,7 @@ iD.modes.DrawArea = function(wayId) {
map.dblclickEnable(false)
.fastEnable(false);
- map.hint('Click on the map to add points to your area. Finish the ' +
- 'area by clicking on your first point');
+ map.tail('Click to add points to your area. Click the first point to finish the area.');
history.perform(
iD.actions.AddNode(node),
@@ -116,7 +115,7 @@ iD.modes.DrawArea = function(wayId) {
surface.selectAll('.way, .node')
.classed('active', false);
- mode.map.hint(false);
+ mode.map.tail(false);
mode.map.fastEnable(true);
surface
diff --git a/js/id/modes/draw_line.js b/js/id/modes/draw_line.js
index a59e3a7e9..68130d7b8 100644
--- a/js/id/modes/draw_line.js
+++ b/js/id/modes/draw_line.js
@@ -19,7 +19,7 @@ iD.modes.DrawLine = function(wayId, direction) {
map.dblclickEnable(false)
.fastEnable(false)
- .hint('Click to add more points to the line. ' +
+ .tail('Click to add more points to the line. ' +
'Click on other lines to connect to them, and double-click to ' +
'end the line.');
@@ -152,7 +152,7 @@ iD.modes.DrawLine = function(wayId, direction) {
surface.selectAll('.way, .node')
.classed('active', false);
- mode.map.hint(false);
+ mode.map.tail(false);
mode.map.fastEnable(true);
mode.map.minzoom(0);
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index a2f2acfd9..9edb347e4 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -21,7 +21,7 @@ iD.Map = function() {
lines = iD.svg.Lines(),
areas = iD.svg.Areas(),
midpoints = iD.svg.Midpoints(),
- tooltip = d3.tooltip(),
+ tail = d3.tail(),
surface, tilegroup;
function map(selection) {
@@ -33,8 +33,7 @@ iD.Map = function() {
.on('mousedown.drag', function() {
translateStart = projection.translate();
})
- .call(zoom)
- .call(tooltip);
+ .call(zoom);
surface = supersurface.append('svg')
.on('mouseup.reset-transform', resetTransform)
@@ -46,9 +45,13 @@ iD.Map = function() {
})
.call(iD.svg.Surface());
+
map.size(selection.size());
map.surface = surface;
+ supersurface
+ .call(tail);
+
d3.select(document).call(keybinding);
}
@@ -286,9 +289,8 @@ iD.Map = function() {
return map;
};
- map.tooltip = function (_) {
- if (_ === false) tooltip.off();
- else tooltip.text(_);
+ map.tail = function (_) {
+ tail.text(_);
return map;
};
diff --git a/js/lib/d3.tail.js b/js/lib/d3.tail.js
new file mode 100644
index 000000000..00627de0a
--- /dev/null
+++ b/js/lib/d3.tail.js
@@ -0,0 +1,65 @@
+d3.tail = function() {
+ var text = false,
+ container,
+ xmargin = 20,
+ tooltip_size = [0, 0],
+ selection_size = [0, 0],
+ transformProp = iD.util.prefixCSSProperty('Transform');
+
+ var tail = function(selection) {
+
+ d3.select(window).on('resize.tail-size', function() {
+ selection_size = selection.size();
+ });
+
+ function setup() {
+
+ container = d3.select(document.body)
+ .append('div').attr('class', 'tail');
+
+ selection
+ .on('mousemove.tail', mousemove)
+ .on('mouseover.tail', mouseover)
+ .on('mouseout.tail', mouseout);
+
+ selection_size = selection.size();
+
+ }
+
+ function mousemove() {
+ if (text === false) return;
+ var xoffset = ((d3.event.x + tooltip_size[0] + xmargin) > selection_size[0]) ?
+ -tooltip_size[0] - xmargin : xoffset = xmargin;
+ container.style(transformProp, 'translate(' +
+ (~~d3.event.x + xoffset) + 'px,' +
+ ~~d3.event.y + 'px)');
+ }
+
+ function mouseout() {
+ if (text !== false) container.style('display', 'none');
+ }
+
+ function mouseover() {
+ if (text !== false) container.style('display', 'block');
+ }
+
+ if (!container) setup();
+
+ };
+
+ tail.text = function(_) {
+ if (_ === false) {
+ text = _;
+ container.style('display', 'none');
+ return tail;
+ } else if (container.style('display') == 'none') {
+ container.style('display', 'block');
+ }
+ text = _;
+ container.text(text);
+ tooltip_size = container.size();
+ return tail;
+ };
+
+ return tail;
+};
diff --git a/js/lib/d3.tooltip.js b/js/lib/d3.tooltip.js
deleted file mode 100644
index 1be658038..000000000
--- a/js/lib/d3.tooltip.js
+++ /dev/null
@@ -1,46 +0,0 @@
-d3.tooltip = function() {
- var text, on = false, container, tooltip_size, container_size,
- transformProp = iD.util.prefixCSSProperty('Transform');
-
- var tooltip = function(selection) {
- function setup() {
- var rect = selection.node().getBoundingClientRect();
- container = d3.select(document.body)
- .append('div').attr('class', 'mouse-tooltip')
- .style({
- position: 'absolute'
- });
-
- selection
- .on('mousemove.tooltip', mousemove);
-
- container_size = container.size();
- }
-
- function mousemove() {
- if (!on) return;
- container.style(transformProp, 'translate(' +
- ~~d3.event.x + 'px,' +
- ~~d3.event.y + 'px)');
- }
-
- if (!container) setup();
- };
-
- tooltip.text = function(_) {
- if (_ === false) {
- on = false;
- container.style('display', 'none');
- return tooltip;
- } else if (container.style('display') == 'none') {
- container.style('display', 'block');
- }
- on = true;
- text = _;
- container.text(text);
- size = container.size();
- return tooltip;
- };
-
- return tooltip;
-};