CODEWITHSUNDEEP
angulartypescript
95_lady
95_lady

Reputation: 59

MatTooltip position relative to mouse cursor

How can I remove built-in position matTooltip? I want to position matTooltip relative to mouse course. I use hostListener for that and change style left: tooltipElement.style.left = e.clientX - 50 + 'px' but when I mouseover on div firstly it is showed on center below (built-in styles) and later tooltip jump where mouse coursor is places.

Upvotes: 2

Views: 5244

Answers (2)

Anthony Settergren
Anthony Settergren

Reputation: 230

According to the API, https://material.angular.io/components/tooltip/api#MatTooltip, you can set matTooltipPositionAtOrigin and then manually call the open method and pass in an origin with X and Y values. My solution was to use ViewChild to get a reference to the component instance and manually open with the origin from my mousemove event.

Here is a quick code example.

HTML

<div #someElement [matTooltip]="tooltip" [matTooltipPositionAtOrigin]="true">
   ...
</div>

Component

@ViewChild('someElement', {static: true, read: MatTooltip}) tooltipComponent: MatTooltip;

...

setTooltip(tooltip: string, event: MouseEvent): void {
    this.tooltip = tooltip;
    this.tooltipComponent.show(0, {x: event.clientX, y: event.clientY });
}

Upvotes: 2

vonwilkending
vonwilkending

Reputation: 19

The matTooltip Element will be displayed below the element but this can be configured using the matTooltipPosition input. The tooltip can be displayed above, below, left, or right of the element.

Example taken from https://material.angular.io/components/tooltip/overview:

<button mat-raised-button
    matTooltip="Info about the action"
    [matTooltipPosition]="'left'"
    aria-label="Button that displays a tooltip in various positions">Action
</button>

So if you want to position your tooltip relative to some condition you could write yourself a function that maps the condition to one of the above mentioned tooltip directions like so:

[matTooltipPosition]="getAppropriateTooltipPosition()"

Upvotes: 0

Related Questions