diff --git a/css/app.css b/css/app.css
index 4aba98318..cafe19774 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1044,7 +1044,16 @@ div.typeahead a:first-child {
}
.Browse .tooltip .tooltip-arrow {
- left: 30px;
- }
-
+ left: 30px;
+}
+.mouse-tooltip {
+ opacity:0.5;
+ background :#fff;
+ margin-left: 20px;
+ 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..08c23a46b 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
+
diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js
index 37767f3de..4936f1578 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.tooltip('Click on the map to add a point.');
map.surface.on('click.addpoint', function() {
var node = iD.Node({loc: map.mouseCoordinates(), _poi: true});
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 9bb695747..7d3bd8a2a 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(),
+ tooltip = d3.tooltip(),
surface, tilegroup;
function map(selection) {
@@ -32,7 +33,8 @@ iD.Map = function() {
.on('mousedown.drag', function() {
translateStart = projection.translate();
})
- .call(zoom);
+ .call(zoom)
+ .call(tooltip);
surface = supersurface.append('svg')
.on('mouseup.reset-transform', resetTransform)
@@ -281,6 +283,12 @@ iD.Map = function() {
return map;
};
+ map.tooltip = function (_) {
+ if (_ === false) tooltip.off();
+ else tooltip.text(_);
+ return map;
+ };
+
map.hint = function (_) {
if (_ === false) {
d3.select('div.inspector-wrap')
diff --git a/js/lib/d3.tooltip.js b/js/lib/d3.tooltip.js
new file mode 100644
index 000000000..1be658038
--- /dev/null
+++ b/js/lib/d3.tooltip.js
@@ -0,0 +1,46 @@
+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;
+};