Support positioning relative to marks

[domoritz]

• Support both positionings relative to mark and to the cursor.
• Define relative offsets for both cases.
• For positioning relative to marks, let us define where the tooltip is (top, left, right, bottom).
• For positioning relative to marks, we should have a maximum distance after which we position the tooltip relative to the cursor.

@nyurik implemented something like this in kibana. https://github.com/elastic/kibana/pull/17632/files

[domoritz]

https://github.com/elastic/eui/blob/ff9d5aa29d7ce5cd48b8f331d7d417767c2c123e/src/services/popover/calculate_popover_position.js

[nyurik]

Here's the implementation using our positioning library - see construction of the clientRect https://github.com/nyurik/kibana/blob/c81fff3671cf40b86b1a368115b3852c0f9d8af3/src/core_plugins/vega/public/vega_view/vega_tooltip.js#L55 (note that it supports both the x,y mouse and mark. This is important because some marks may be too big to be used for centering)

[pelotom]

Does this issue cover restoring the ability to have the tooltip follow the mouse as it moves? Currently it doesn't seem possible to do that with a view.tooltip(...) handler, because it only gets invoked once on entry and not when moving the mouse around on top of a mark element.

[nyurik]

@pelotom no, that would be a different issue with Vega itself. This tooltip opens up only when Vega tells it to open - basically it is a simple replacement for the built-in (drawn on canvas) tooltip.

[domoritz]

@jheer mentioned that the next version of Vega will fire tooltip events as the cursor moves. With that, we will get the old behavior back (which I agree is preferred).

[pelotom]

Ah, I just filed an issue for it: https://github.com/vega/vega/issues/1263. Good to hear it's already being planned!

[nyurik]

Should it be up to the handler to determine if the last value is the same object as the current one? It might get tricky if the data itself changes inside the object. I wouldn't want to keep flashing the tooltip if the value is not changing.

[domoritz]

Vega 4rc is out and so we can fix this now using getItemBoundingClientRect.

[ifokeev]

any updates here?

[domoritz]

I’d love to review a PR. It should be fairly straightforward to implement.

[bkfarnsworth]

It would also be great if this allowed clicking on a link inside the tooltip. Right now you can't have a link inside vega tooltips because they will immediately reposition if you try to move the mouse to click on it.

[Shians]

I'd like to pop up a tooltip locked to the mark without following the cursor. Is this possible right now?

[domoritz]

That's what this issue is about. Not, it's not implemented yet.

[marshallpete]

I have a working implementation for this. Look for a PR in the next couple of days.

[marshallpete]

Should we utilize the offsetX and offsetY options when positioning relative to the mark or should we provide a new offset option?

In my implementation, the tooltip can be positioned in any of the following locations relative to the mark:

type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

Similar to the label transform in vega, the position calculation will try multiple positions till it finds one that doesn't leave the viewport.

I'm not sure what the expected behavior for offsetY would be when the tooltip is positioned to the right. Do we shift up or down?

If we used offset then it can be a fixed padding in the same direction as the placement. For example, placing the tooltip to the right with an offset of 10 would move the tooltip and additional 10 pixels to the right. Placing the tooltip in the bottom-left with a offset of 10 would push the tooltip to the left 7.07px and down 7.07px (making the diagonal distance 10px).

I don't love having options that are ignored in certain circumstances though... curious what others think

CC: @domoritz @nyurik