使用 Tippy.js 在 content prop 中使用指令或组件

问题描述

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

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

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

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

我想要类似的东西，创建一个指令或组件：

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

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

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

  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 道具？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular cytoscape.js tippyjs