Gutter tooltip position inside container

[alitan]

Describe the bug

Gutter tooltip position (which is currently calculated for fixed positioning container), is not working when the editor is in a container div. The new container queries and container-type: size or container-type: inline-size for parent breaks the fixed positioning.

Expected Behavior

Gutter tooltip position being calculated properly, either following mouse or not.

Current Behavior

Gutter tooltip position is not correct ( working as relative positioning) when the parent container has container query.

Reproduction Steps

Assing container query on the parent for the editor.

Possible Solution

Gutter tooltip can be handled like Autocomplete popup content. (append to body). That way it will not be affected by editors parent positioning and container css attribute.

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

1.32.8 / Chrome / Windows

[InspiredGuy]

Hey @alitan, thank you for the report. Could you please attach a small example with an editor in a div using container queries, where you the issue is reproducible?

[alitan]

hello, here is an example that i put together on codepen. >> https://codepen.io/alitan/pen/rNbGOQE
if you resize the browser small enough (so that you see the container query kicking in) and rollover the "x" gutter mark you will see that the tooltip is not in the right place.

[whazor]

There are many CSS settings where a new relative viewport is created. For example also position: fixed, but also these containers indeed.

Many elements in Ace, such as auto-complete/tooltips and also these gutter tooltips are positioned to the browser viewport. But the elements gets incorrectly positioned against new viewport. The solution is to move the elements to document.body (or an element underneath document.body).

For normal tooltip:

new Tooltip(document.body);

For autocomplete:

const completer = Autocomplete.for(aceInstance);
completer.parentNode = document.body;

However, by default gutter tooltips are always attached to the editor.

ace/src/mouse/default_gutter_handler.js

Lines 132 to 134 in 4befc2c

	class GutterTooltip extends Tooltip {
	constructor(editor) {
	super(editor.container);

So we would need to make this configurable.