diff --git a/css/app.css b/css/app.css
index 4aba98318..932ca3b52 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1044,7 +1044,17 @@ div.typeahead a:first-child {
}
.Browse .tooltip .tooltip-arrow {
- left: 30px;
- }
-
+ left: 30px;
+}
+.tail {
+ pointer-events:none;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.7);
+ max-width: 250px;
+ margin-top: -15px;
+ padding: 5px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
diff --git a/index.html b/index.html
index b106c35b7..9db659489 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +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 37767f3de..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.hint('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 c0defee3f..9edb347e4 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -21,6 +21,7 @@ iD.Map = function() {
lines = iD.svg.Lines(),
areas = iD.svg.Areas(),
midpoints = iD.svg.Midpoints(),
+ tail = d3.tail(),
surface, tilegroup;
function map(selection) {
@@ -44,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);
}
@@ -284,6 +289,11 @@ iD.Map = function() {
return map;
};
+ map.tail = function (_) {
+ tail.text(_);
+ return map;
+ };
+
map.hint = function (_) {
if (_ === false) {
d3.select('div.inspector-wrap')
diff --git a/js/lib/d3.tail.js b/js/lib/d3.tail.js
new file mode 100644
index 000000000..8046e4a96
--- /dev/null
+++ b/js/lib/d3.tail.js
@@ -0,0 +1,70 @@
+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);
+
+ container
+ .on('mousemove.tail', mousemove);
+
+ 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 (d3.event.relatedTarget !== container.node() &&
+ text !== false) container.style('display', 'none');
+ }
+
+ function mouseover() {
+ if (d3.event.relatedTarget !== container.node() &&
+ 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;
+};