tooltip: buggy when deployed as an Angular Element

#### What is the expected behavior?
That tooltips are not buggy.

#### What is the current behavior?
Tooltips are buggy.

#### What are the steps to reproduce?
_app.module.ts_
`import { MatTooltipModule } from '@angular/material/tooltip';`

_somecomponent.component.html_
`
ÅPNE`

And then deploy the whole project as an Angular Element.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular CLI: 7.3.6
Node: 10.15.2
OS: win32 x64
Angular: 7.2.10
@angular/material 7.3.5
typescript 3.1.1
Chrome Version 73.0.3683.86 (Official Build) (64-bit)

#### Is there anything else we should know?

Every time i hover on the button, a small grey "blob" is added to a "row" under the address-field in my browser.

When i click the button, a "tick()" is triggered (because angular elements needs that without ngZone) and the row of grey blobs is replaced with the tooltip. It's in the wrong spot, but it's there. I suspect this has something to do with how "Angular Elements" work? Since the grey blobs were only "converted" to the tooltip after a "tick()"?

@levgaas posted the same issue a year ago, but did not specify how he managed to fix it: https://github.com/angular/material2/issues/11361

Reproduziere das Problem mit app.module.ts, somecomponent.component.html, MatTooltipModule und matTooltip, während das Projekt als Angular Element bereitgestellt wird. Beginne damit, das Hover- und Klickverhalten im gemeldeten Setup mit Angular 7.2.10 und Material 7.3.5 zu beobachten. Als erledigt gilt die Aufgabe, wenn beim Hover genau ein korrekt positionierter Tooltip angezeigt wird, ohne dass sich graue Flecken ansammeln oder ein manueller tick() erforderlich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.