将鼠标悬停在内容上时,在工具提示中显示图像给我一种闪烁的效果

时间:2019-04-04 10:32:37

标签: javascript css angular tooltip

我在这里使用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();
  }
}

stackblitz链接为here

我寻找的结果是:

  • 我应该能够从要发送标签的标签发送图片网址 显示工具提示。
  • 工具提示应在其中显示该图像。

2 个答案:

答案 0 :(得分:1)

这是设置叠加层的方式:

  • 当您将鼠标悬停在按钮上时,叠加层可见
  • 当您移至按钮以外的任何位置时,覆盖层会隐藏

您遇到的闪烁是由于从未解决的情况

  1. 当您将鼠标悬停在按钮的底部时,覆盖层将可见
  2. 但是由于叠加层从按钮的中间开始,因此从技术上讲,您现在将鼠标悬停在叠加层上(并且不再悬停在按钮上),因此叠加层变为隐藏状态
  3. 隐藏叠加层后,您将返回上方的#1点 ...

这种情况不断发生,这就是为什么您会出现闪烁效果的原因。

作为解决方案,请将以下代码添加到您的 tooltip.component.css 中,该代码将叠加层放置在按钮下方,这样就不会发生递归闪烁:

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

更新:对于更大的按钮,可以更改最大值,以确保覆盖层从按钮下方开始并且没有重叠。 demo here

答案 1 :(得分:0)

对于上面的例子中寻找相对位置的每个人:

删除

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

!添加

@import '~@angular/cdk/overlay-prebuilt.css';

进入您的styles.css。永远带我去寻找答案。

来源:https://medium.com/angular-in-depth/building-tooltips-for-angular-3cdaac16d138

https://stackblitz.com/edit/building-tooltip

除了这个最小的变化外,它们完全相同:)