2

我试图弄清楚如何将具有相应样式和数据的指令或组件合并到 Tippy.js 对象的内容道具中。我想拥有它，让我可以灵活地处理内容和行为以及相应工具提示的样式。我想为使用 Cytoscape.js 构建的图形的每个节点设置一个工具提示。

我在这里找到了这个页面，向我解释了如何将 Tippy.js 合并到 Cytoscape.js 节点中。我遵循了这个示例，但我不想在 Tippy 对象的 content 属性中添加内联元素，而是想添加一个指令或组件。

所以不要在这里创建内联元素，如上面提到的页面上的示例所示：

content: () => {
  let content = document.createElement('div');
  content.innerHTML = 'Tippy content';
  return content;
}

我希望它与此类似，创建一个指令或组件：

content: '<input tippy [tippyOptions]="{}" class="search-input" type="text">',

我在 SO 上找到了一个示例，它显示了这种方法，就是这个页面。

我按照这个例子，现在为每个 Tippy.object 在 content 属性中创建一个动态指令：

  const nodeReference = node.popperRef(); // used only for positioning
  // A dummy element must be passed as tippy only accepts dom element(s) as the target
  // https://atomiks.github.io/tippyjs/v6/constructor/#target-types
  const domElement = document.createElement('div');

  node.toolTip = Tippy(domElement, {
      getReferenceClientRect: nodeReference.getBoundingClientRect, // https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect
      content: '<input tippy [tippyOptions]="{ arrow: true, createPopperInstanceOnInit: true }" class="search-input" type="text" (keyup)="searchInputKeyDown($event)">',
      allowHTML: true,
      appendTo: document.body
  });

我的指令看起来像上面提到的 SO 页面上的示例：

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

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

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

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

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

这似乎有效，它确实正确添加了指令，但是，当将鼠标悬停在相应区域上时，它只显示一个空输入字段，如下所示：

在此处输入图像描述

我想了解的是现在。现在如何在指令内部使用带有此指令的样式来适当地设置工具提示的样式？另外，如何在指令中正确使用 Tippy.js 道具？

4

0 回答 0