[Tooltip/Snackbar]: overlay content size is not properly reflected when component is placed inside another element

[RivaIvanova]

Description

The tooltip does not render properly when placed inside an element.

Placed inside a button
<div class="container end">
  <button igxIconButton="flat" [igxTooltipTarget]="themeTooltipRef">
    <igx-icon>palette</igx-icon>
    <div #themeTooltipRef="tooltip" igxTooltip>Click to toggle between dark/light themes</div>
  </button>
</div>

Placed outside the button
<div class="container end">
  <button igxIconButton="flat" [igxTooltipTarget]="themeTooltipRef2">
    <igx-icon>palette</igx-icon>
  </button>
  <div #themeTooltipRef2="tooltip" igxTooltip>Click to toggle between dark/light themes</div>
</div>

The reason for the first behavior is that inside the overlay service's attach method, getBoundingClientRect returns the tooltip's min-width CSS constraint, which is 24px, instead of the actual size.

Apart from the poor formatting of the text, this gives the false impression that the autopositioning strategy has no effect.

Before the major refactoring introduced in 20.1.0 by this PR, the tooltip behaved differently, giving the impression that it worked in both cases (inside and outside an element), but the overlay content wrapper's width was bigger than the actual tooltip content. This made it seem as if the tooltip is not properly positioned relative to its target.

• igniteui-angular version: master, 20.1.x, 19.2.x
• browser: any

Steps to reproduce

Play around with the code snippet below in the tooltip dev demos.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 64px;
}

.end {
  justify-content: end;
  margin: 24px;
}

<div class="container end">
  <button igxIconButton="flat" [igxTooltipTarget]="themeTooltipRef">
    <igx-icon>palette</igx-icon>
    <div #themeTooltipRef="tooltip" igxTooltip><img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"></div>
    <!-- <div #themeTooltipRef="tooltip" igxTooltip>Click to toggle between dark/light themes</div> -->
  </button>
</div>

<div class="container end">
  <button igxIconButton="flat" [igxTooltipTarget]="themeTooltipRef2">
    <igx-icon>palette</igx-icon>
  </button>
  <div #themeTooltipRef2="tooltip" igxTooltip><img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"></div>
  <!-- <div #themeTooltipRef2="tooltip" igxTooltip>Click to toggle between dark/light themes</div> -->
</div>

Result

In the description.

Expected result

Tooltip should size properly.

Attachments

Attach a sample if available, and screenshots, if applicable.

[RivaIvanova]

A similar behavior is observed for the igx-snackbar, too.

<button (click)="snackbar.toggle(); snackbar2.toggle()">
  Click
  <igx-snackbar #snackbar2 [autoHide]="false"
    >Inner Snackbar Message
  </igx-snackbar>
</button>

<igx-snackbar #snackbar [autoHide]="false"
  >Outer Snackbar Message
</igx-snackbar>