Отображение изображения во всплывающей подсказке дает мне мерцающий эффект при наведении на содержимое - PullRequest
Новая
       12

Отображение изображения во всплывающей подсказке дает мне мерцающий эффект при наведении на содержимое

1 голос
/ 04 апреля 2019

Я использую Angular здесь. Я пытаюсь отобразить изображение / видео внутри всплывающей подсказки при наведении курсора на определенный контент. Однако при наведении указателя мыши на содержимое изображение мерцает, прежде чем оно будет отображено. Переход не такой плавный, как когда я помещаю текст вместо изображения. Как мне это исправить?

Я пытаюсь установить src изображения на входе для компонента всплывающей подсказки. У меня есть директива, которая генерирует содержание всплывающей подсказки. Код здесь такой:

app.component.html 

<button awesomeTooltip="Hello World!"  image="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image">Hi there, I have a tooltip</button>

tooltip.component.ts 

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 = '';
}

tooltip.component.html 

<div @tooltip>
   <img [src]="image" width="20px" height="30px">
   <!-- Hello -->
</div>

tooltip.directive.ts 

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<AwesomeTooltipComponent>
      = this.overlayRef.attach(new ComponentPortal(AwesomeTooltipComponent));
    tooltipRef.instance.text = this.text;
    tooltipRef.instance.image = this.image;
  }

  @HostListener('mouseout')
  hide() {
    this.overlayRef.detach();
  }
}

Ссылка на стек может быть здесь :

Я ищу результат:

  • Я должен иметь возможность отправлять URL-адрес изображения из тега, над которым я хочу показать подсказку.
  • Подсказка должна показывать это изображение внутри нее.

1 Ответ

1 голос
/ 04 апреля 2019

Вот как настроен оверлей:

  • при наведении на кнопку, наложение становится видимым
  • при переходе к чему-либо, кроме кнопки, наложение скрывается

Мерцание, которое вы испытываете, происходит из-за никогда не разрешающейся ситуации :

  1. При наведении на нижнюю часть кнопки наложение становится видимым
  2. Но поскольку наложение начинается с середины кнопки, технически вы теперь зависаете над наложением (и больше не над кнопкой), поэтому наложение становится скрытым
  3. Как только оверлей станет скрытым, вы вернетесь к точке # 1 выше ...

Это продолжается и продолжается, поэтому вы испытываете эффект мерцания.

для решения, добавьте следующий код в tooltip.component.css , который помещает оверлей под кнопку, чтобы рекурсивное мерцание не происходило: 

::ng-deep .cdk-overlay-connected-position-bounding-box{top:60px !important; position:absolute;}

ОБНОВЛЕНИЕ: для кнопки большего размера можно изменить верхнее значение, чтобы убедиться, что наложение начинается из-под кнопки и что перекрытия нет. демо здесь

...