Tooltip: incorrect gutter position when `wrap` and `tooltipFollowsMouse: false` (throws `TypeError: can't access property "getBoundingClientRect", gutterElement is null`)

[davidjb]

Describe the bug

When wrap and tooltipFollowsMouse: false are enabled in Ace, if you hover over a gutter icon, the tooltip is incorrectly positioned - either too far down or in the top-left of the page - and Ace throws an exception TypeError: can't access property "getBoundingClientRect", gutterElement is null.

Expected Behavior

Tooltip calculations would take into account the wrapped lines and display correctly.

Current Behavior

Uncaught TypeError: can't access property "getBoundingClientRect", gutterElement is null
    showTooltip https://ace.c9.io/build/src/ace.js:3453
    tooltipTimeout https://ace.c9.io/build/src/ace.js:3492
    setTimeout handler*GutterHandler/< https://ace.c9.io/build/src/ace.js:3489
    _dispatchEvent https://ace.c9.io/build/src/ace.js:870
    onMouseEvent https://ace.c9.io/build/src/ace.js:4461

Hovering over line 37 displays the tooltip at the top-left of the page:

Hovering over line 40 displays the tooltip 2 lines too far down:

Reproduction Steps

Reproduced in the live version of https://ace.c9.io/build/kitchen-sink.html:

1. Select a document like CSS with some long lines
2. Set wrap: 40 (or something to cause wrapping)
3. Set tooltipFollowsMouse: false
4. Hover over any gutter icon that's further down from the wrapped lines
5. Observe the tooltip either appears too low or in the top-left corner of the page and throws exceptions as below.

Possible Solution

The issue appears caused by the following:

ace/src/mouse/default_gutter_handler.js

Lines 75 to 79 in c5b2f82

	var gutterRow = mouseEvent.getGutterRow();
	var gutterCell = gutter.$lines.get(gutterRow);
	if (gutterCell) {
	var gutterElement = gutterCell.element.querySelector(".ace_gutter_annotation");
	var rect = gutterElement.getBoundingClientRect();

mouseEvent.getGutterRow() returns a row number that's too high - seemingly not accounting for the wrapping of the content, and then the subsequent retrieval of gutterElement returns null, which then causes the exception from gutterElement.getBoundingClientRect().

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

1.43.3; Firefox and Safari

[nightwing]

Thanks for the report, this will be fixed by #5878

[davidjb]

Thanks very much @nightwing. Could I please clarify the PR that would fix this? #5878 is this issue.

[nightwing]

Sorry, i meant #5872
can be tested online at https://raw.githack.com/mkslanc/ace/gutter-tooltip/kitchen-sink.html

[davidjb]

Fantastic, thanks @nightwing. That definitely looks fixed to me.