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

Reproduce the issue using app.module.ts, somecomponent.component.html, MatTooltipModule, and matTooltip while deploying the project as an Angular Element. Start by observing hover and click behavior in the reported Angular 7.2.10 and Material 7.3.5 setup. Done means hovering produces one correctly positioned tooltip without accumulating grey blobs or requiring a manual tick().

Written by the indexing model from the issue text.