title: Displaying image in tooltip is giving me a flickering effect when hovered over the content
body: <p>I am using Angular here.I am trying to display an image/video inside the tooltip when hovered over the certain content. However, when I hover over the content, the image gives a flickering effect before being rendered. The transition isn't as smooth as when I put text in place of the image. How do I fix it? </p>
  
  <p>I am trying to set the image src in input to the tooltip component. I have a directive which is generating the tooltip content. Code here is as: </p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;button awesomeTooltip="Hello World!"  image="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image"&gt;Hi there, I have a tooltip&lt;/button&gt;
  </code></pre>
  
  <p><strong>tooltip.component.ts</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { animate, style, transition, trigger } from '@angular/animations';
  
  @Component({
    selector: 'awesome-tooltip',
    styleUrls: ['./tooltip.component.css'],
    templateUrl: './tooltip.component.html',
    animations: [
      trigger('tooltip', [
        transition(':enter', [
          style({ opacity: 0 }),
          animate(300, style({ opacity: 1 })),
        ]),
        transition(':leave', [
          animate(300, style({ opacity: 0 })),
        ]),
      ]),
    ],
  })
  export class AwesomeTooltipComponent {
  
    @Input() image=''
    @Input() text = '';
  }
  
  </code></pre>
  
  <p><strong>tooltip.component.html</strong></p>
  
  <pre><code>&lt;div @tooltip&gt;
     &lt;img [src]="image" width="20px" height="30px"&gt;
     &lt;!-- Hello --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>tooltip.directive.ts</strong></p>
  
  <pre><code>import { ComponentRef, Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
  import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';
  import { ComponentPortal } from '@angular/cdk/portal';
  
  import { AwesomeTooltipComponent } from './tooltip.component';
  
  @Directive({ selector: '[awesomeTooltip]' })
  export class AwesomeTooltipDirective implements OnInit {
  
    @Input('awesomeTooltip') text = '';
    @Input('image') image = '';
    private overlayRef: OverlayRef;
  
    constructor(private overlay: Overlay,
                private overlayPositionBuilder: OverlayPositionBuilder,
                private elementRef: ElementRef) {
    }
  
    ngOnInit(): void {
      const positionStrategy = this.overlayPositionBuilder
        .flexibleConnectedTo(this.elementRef)
        .withPositions([{
          originX: 'center',
          originY: 'top',
          overlayX: 'center',
          overlayY: 'bottom',
          offsetY: -8,
        }]);
  
      this.overlayRef = this.overlay.create({ positionStrategy });
    }
  
    @HostListener('mouseenter')
    show() {
      const tooltipRef: ComponentRef&lt;AwesomeTooltipComponent&gt;
        = this.overlayRef.attach(new ComponentPortal(AwesomeTooltipComponent));
      tooltipRef.instance.text = this.text;
      tooltipRef.instance.image = this.image;
    }
  
    @HostListener('mouseout')
    hide() {
      this.overlayRef.detach();
    }
  }
  
  </code></pre>
  
  <p>The stackblitz link is <a href="https://stackblitz.com/edit/angular-e9py6n?file=src%2Fapp%2Ftooltip%2Ftooltip.directive.ts" rel="nofollow noreferrer">here</a>: </p>
  
  <p>I result I am looking for is: </p>
  
  <ul>
  <li>I should be able to send image url from the tag over which, I want to
  show the tooltip. </li>
  <li>The tooltip should show that image inside it.</li>
  </ul>