Components: [Tooltip] Open relative to the mouse

[victornoel]

proposal:

Add an option to tooltip so that the position is relative to the mouse position and not the element position.

What is the expected behavior?

We should be able to have the tooltip appear next to the mouse.

What is the current behavior?

When there is a tooltip attached to a big (visually) element, the tooltip appears around the component, but very far from the mouse.

What is the use-case or motivation for changing an existing behavior?

Sometimes it makes no sense to have the tooltip so far from the mouse: the user is expecting it to appear close.

[victornoel]

@andrewseguin is there anything I can do to solve this issue? Where should such a feature be implemented? I'm asking because the architecture of material components is quite complex and I'm not sure if I should stay inside tooltip or if there is some need to touch other more abstract components…

[andrewseguin]

The trivial case should be easy to implement, here's an example set of logic that would be added to the show method in tooltip.ts.

I imagine we would want some @Input to turn on the functionality and some math using the pointer event's cursor position to determine the right offsets.

My concern would be in making sure the overlay works well in edge cases, e.g. when the overlay falls back on a different position than expected (tooltip appears above rather than below since the trigger is at the bottom of the screen). Should be fine if only one axis is offset depending on if its above/below or before/after

  show(delay: number = this.showDelay): void {
   ...

    // Offset the overlay 100 pixels right and 100 pixels down.
    const overlayConfig = this._overlayRef!.getConfig();
    const strategy = overlayConfig.positionStrategy as ConnectedPositionStrategy;
    overlayConfig.positionStrategy = strategy.withOffsetY(300).withOffsetX(300);
    this._overlayRef!.updatePosition();
  }

[victornoel]

@andrewseguin sorry I have some more questions before I try to implement it, I've not worked with overlays, positioning and visual mouse things yet :)

If I correctly understand how things work, the overlay is responsible for positioning the tooltip. Does this means that depending on the configured position (above, below, etc), the offset will have to be computed differently?

How can I retrieve the correct origin coordinates (of the elementRef the tooltip is attached to) to compute the offset from? Am I limited to using HTMLElement.getBoundingClientRect and find the coordinate from there based on the value of the configured position? Or do I have some more high-level options?

Also, what would be the correct way to retrieve the pointer position?

Thanks :)

[gtamas]

What's the status of this? Any progress so far?

[azhdarshirinzada]

What's the status of this? Any progress so far?

still 😁