search

ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
393 stars 48 forks source link

Bug: Tooltip size is altered in strange ways when space availability usually rather causes a re-orientation of position #232

Closed k290 closed 10 months ago

k290 commented 10 months ago

When out of space, the extension tooltip:

1.) Often changes size to a very awkward dimension. I can reproduce this in all possible position settings (but not consistently). 2.) Size remains with strange dimension even when size is returned.

The correct functionality is to always change the orientation of the tooltip, which is how it seems to work 50% of the time.

See below video of the issue: https://youtu.be/4i1dxGhQ0_Y

nzbin commented 10 months ago

I know this issue. It‘s because there has two different tooltips (mat-tooltip and mtx-tooltip). The component CSS has conflicts. In the real app, it should use only one type of tooltip and shouldn't mixed use. It also can be fixed with following CSS. But I'm not sure what the side effect.

.mat-mdc-tooltip,
.mtx-mdc-tooltip {
  position: relative !important;
}
k290 commented 10 months ago

Ah I see..

The .mat-mdc-tooltip sometimes has higher priority

If your styles have higher specificity then they will take preference.

A solution that doesn't interfere with .mat-mdc-tooltip is

div.mtx-mdc-tooltip{
    position: relative;
    transform: scale(0);
}

Similarly, if I make the same change to your source code here then it also takes precedence:

image

nzbin commented 10 months ago

If you hover the mat-tooltip first and then hover the mtx-tooltip. The mat-tooltip will have the same problems. I don't want to modify the CSS because I don't know the side effect.

nzbin commented 10 months ago

I have fixed this issue, please try the new version 16.0.3.

k290 commented 10 months ago

Thank you @nzbin . Much better