在 Angular 中使用 Tippy.js

Question

我有一个包含以下代码的指令

import { Directive, Input, OnInit, ElementRef, SimpleChanges, OnChanges } from '@angular/core';
import tippy from 'tippy.js';

@Directive({
  selector: '[tippy]'
})
export class TippyDirective implements OnInit, OnChanges {

  @Input('tippyOptions') public tippyOptions: Object;

  private el: any;
  private tippy: any = null;
  private popper: any = null;

  constructor(el: ElementRef) {
    this.el = el;
  }

  public ngOnInit() {
    this.loadTippy();
  }

  public ngOnChanges(changes: SimpleChanges) {
    if (changes.tippyOptions) {
      this.tippyOptions = changes.tippyOptions.currentValue;
      this.loadTippy();
    }
  }

  public tippyClose() {
    this.loadTippy();
  }

  private loadTippy() {
    setTimeout(() => {
      let el = this.el.nativeElement;
      let tippyOptions = this.tippyOptions || {};

      if (this.tippy) {
        this.tippy.destroyAll(this.popper);
      }

      this.tippy = tippy(el, tippyOptions, true);
      this.popper = this.tippy.getPopperElement(el);
    });
  }
}

并使用指令如下

<input tippy [tippyOptions]="{
              arrow: true,
              createPopperInstanceOnInit: true
            }" class="search-input" type="text" 
(keyup)="searchInputKeyDown($event)">

我怎样才能在 mouseenter 或 focus 上显示 Tippy，因为这些是默认触发器，从指令中的tippy实例，这是我console.log(this.tippy)在第 44 行上得到的结果

{
  destroyAll:ƒ destroyAll()
  options:{placement: "top", livePlacement: true, trigger: "mouseenter focus", animation: "shift-away", html: false, …}
  selector:input.search-input
  tooltips:[]
}

当我尝试使用时遇到错误

this.popper = this.tippy.getPopperElement(el);

ERROR TypeError: _this.tippy.getPopperElement is not a function

当我从 github 的 repo 中获取该指令时，如何使该指令起作用

https://github.com/tdanielcox/ngx-tippy/blob/master/lib/tippy.directive.ts

我在这里缺少什么，感谢任何帮助，谢谢

Answer 1

我不确定他们试图在您包含的链接存储库中完成什么。tippy.js不过，要开始工作，您应该能够将指令更改为以下内容：

import { Directive, Input, OnInit, ElementRef } from '@angular/core';
import tippy from 'tippy.js';

@Directive({
  /* tslint:disable-next-line */
  selector: '[tippy]'
})
export class TippyDirective implements OnInit {

  @Input('tippyOptions') public tippyOptions: Object;

  constructor(private el: ElementRef) {
    this.el = el;
  }

  public ngOnInit() {
    tippy(this.el.nativeElement, this.tippyOptions || {}, true);
  }
}

工作示例回购

Answer 2

这适用于tippy.js 6.x

@Directive({selector: '[tooltip],[tooltipOptions]'})
export class TooltipDirective implements OnDestroy, AfterViewInit, OnChanges {
  constructor(private readonly el: ElementRef) {}

  private instance: Instance<Props> = null;

  @Input() tooltip: string;
  @Input() tooltipOptions: Partial<Props>;

  ngAfterViewInit() {
    this.instance = tippy(this.el.nativeElement as Element, {});
    this.updateProps({
      ...(this.tooltipOptions ?? {}),
      content: this.tooltip,
    });
  }

  ngOnDestroy() {
    this.instance?.destroy();
    this.instance = null;
  }

  ngOnChanges(changes: SimpleChanges) {
    let props = {
      ...(this.tooltipOptions ?? {}),
      content: this.tooltip,
    };

    if (changes.tooltipOptions) {
      props = {...(changes.tooltipOptions.currentValue ?? {}), content: this.tooltip};
    }
    if (changes.tooltip) {
      props.content = changes.tooltip.currentValue;
    }

    this.updateProps(props);
  }

  private updateProps(props: Partial<Props>) {
    if (this.instance && !jsonEqual<any>(props, this.instance.props)) {
      this.instance.setProps(this.normalizeOptions(props));
      if (!props.content) {
        this.instance.disable();
      } else {
        this.instance.enable();
      }
    }
  }

  private normalizeOptions = (props: Partial<Props>): Partial<Props> => ({
    ...(props || {}),
    duration: props?.duration ?? [50, 50],
  });
}

使用它看起来像：

<button [tooltip]="'Hello!'">Hover here</button>
<button [tooltip]="'Hi!'" [tooltipOptions]="{placement: 'left'}">Hover here</button>