diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css
index f0d31f10..ac64e002 100644
--- a/lib/ace/css/editor.css
+++ b/lib/ace/css/editor.css
@@ -237,6 +237,21 @@
cursor: move;
}
+.ace_gutter_tooltip {
+ background-color: #FFFFD5;
+ border: 1px solid gray;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+ color: black;
+ display: inline-block;
+ padding: 4px;
+ position: absolute;
+ z-index: 300;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ cursor: default;
+}
+
.ace_folding-enabled > .ace_gutter-cell {
padding-right: 13px;
}
diff --git a/lib/ace/layer/gutter.js b/lib/ace/layer/gutter.js
index 7c70bbd3..1c6607cb 100644
--- a/lib/ace/layer/gutter.js
+++ b/lib/ace/layer/gutter.js
@@ -103,7 +103,7 @@ var Gutter = function(parentEl) {
};
this.update = function(config) {
- var emptyAnno = {className: "", text: []};
+ var emptyAnno = {className: ""};
var html = [];
var i = config.firstRow;
var lastRow = config.lastRow;
@@ -126,7 +126,6 @@ var Gutter = function(parentEl) {
html.push(
"
",
i + 1
);
diff --git a/lib/ace/mouse/default_gutter_handler.js b/lib/ace/mouse/default_gutter_handler.js
index 0fbadfb7..813f68e9 100644
--- a/lib/ace/mouse/default_gutter_handler.js
+++ b/lib/ace/mouse/default_gutter_handler.js
@@ -39,14 +39,16 @@
define(function(require, exports, module) {
"use strict";
var dom = require("../lib/dom");
+var event = require("../lib/event");
function GutterHandler(mouseHandler) {
var editor = mouseHandler.editor;
+ var gutter = editor.renderer.$gutterLayer;
mouseHandler.editor.setDefaultHandler("guttermousedown", function(e) {
if (!editor.isFocused())
return;
- var gutterRegion = editor.renderer.$gutterLayer.getRegion(e);
+ var gutterRegion = gutter.getRegion(e);
if (gutterRegion)
return;
@@ -62,6 +64,98 @@ function GutterHandler(mouseHandler) {
mouseHandler.captureMouse(e, "selectByLines");
return e.preventDefault();
});
+
+
+ var tooltipTimeout, mouseEvent, tooltip, tooltipAnnotation;
+ function createTooltip() {
+ tooltip = dom.createElement("div");
+ tooltip.className = "ace_gutter_tooltip";
+ tooltip.style.maxWidth = "500px";
+ tooltip.style.display = "none";
+ editor.container.appendChild(tooltip);
+ }
+
+ function showTooltip() {
+ if (!tooltip) {
+ createTooltip();
+ }
+ var row = mouseEvent.getDocumentPosition().row;
+ var annotation = gutter.$annotations[row];
+ if (!annotation)
+ return hideTooltip();
+
+ var maxRow = editor.session.getLength();
+ if (row == maxRow) {
+ var screenRow = editor.renderer.pixelToScreenCoordinates(0, mouseEvent.y).row;
+ var pos = mouseEvent.$pos;
+ if (screenRow > editor.session.documentToScreenRow(pos.row, pos.column))
+ return hideTooltip();
+ }
+
+ if (tooltipAnnotation == annotation)
+ return;
+ tooltipAnnotation = annotation.text.join("\n");
+
+ tooltip.style.display = "block";
+ tooltip.innerHTML = tooltipAnnotation;
+ editor.on("mousewheel", hideTooltip);
+
+ moveTooltip(mouseEvent);
+ }
+
+ function hideTooltip() {
+ if (tooltipTimeout)
+ tooltipTimeout = clearTimeout(tooltipTimeout);
+ if (tooltipAnnotation) {
+ tooltip.style.display = "none";
+ tooltipAnnotation = null;
+ editor.removeEventListener("mousewheel", hideTooltip);
+ }
+ }
+
+ function moveTooltip(e) {
+ var rect = editor.renderer.$gutter.getBoundingClientRect();
+ tooltip.style.left = e.x - rect.left + 15 + "px";
+ if (e.y + 3 * editor.renderer.lineHeight + 15 < rect.bottom) {
+ tooltip.style.bottom = "";
+ tooltip.style.top = e.y - rect.top + 15 + "px";
+ } else {
+ tooltip.style.top = "";
+ tooltip.style.bottom = rect.bottom - e.y + 5 + "px";
+ }
+ }
+
+ mouseHandler.editor.setDefaultHandler("guttermousemove", function(e) {
+ var target = e.domEvent.target || e.domEvent.srcElement;
+ if (dom.hasCssClass(target, "ace_fold-widget"))
+ return hideTooltip();
+
+ if (tooltipAnnotation)
+ moveTooltip(e);
+
+ mouseEvent = e;
+ if (tooltipTimeout)
+ return;
+ tooltipTimeout = setTimeout(function() {
+ tooltipTimeout = null;
+ if (mouseEvent)
+ showTooltip();
+ else
+ hideTooltip();
+ }, 50);
+ });
+
+ event.addListener(editor.renderer.$gutter, "mouseout", function(e) {
+ mouseEvent = null;
+ if (!tooltipAnnotation || tooltipTimeout)
+ return;
+
+ tooltipTimeout = setTimeout(function() {
+ tooltipTimeout = null;
+ hideTooltip();
+ }, 50);
+ });
+
}
exports.GutterHandler = GutterHandler;
diff --git a/lib/ace/mouse/mouse_handler.js b/lib/ace/mouse/mouse_handler.js
index b8e992a3..bf708ee2 100644
--- a/lib/ace/mouse/mouse_handler.js
+++ b/lib/ace/mouse/mouse_handler.js
@@ -69,7 +69,7 @@ var MouseHandler = function(editor) {
event.addListener(gutterEl, "mousedown", this.onMouseEvent.bind(this, "guttermousedown"));
event.addListener(gutterEl, "click", this.onMouseEvent.bind(this, "gutterclick"));
event.addListener(gutterEl, "dblclick", this.onMouseEvent.bind(this, "gutterdblclick"));
- event.addListener(gutterEl, "mousemove", this.onMouseMove.bind(this, "gutter"));
+ event.addListener(gutterEl, "mousemove", this.onMouseEvent.bind(this, "guttermousemove"));
};
(function() {