vis 网络节点工具提示注释显示

Question

我为节点添加了标题字段。根据vis.js 文档，它应该在节点悬停时显示工具提示。

我可以在检查元素中看到vis-tooltip div。但它的可见性是隐藏的。在vis.js 文档示例中，我看到popup.css 文件被应用到vis-tooltip 类。但我在我的应用程序中没有看到它

我在选项中有以下节点属性。我需要添加什么吗？

 nodes: {
        title: 'hover',
        shape: 'dot',
        chosen: true,
        color: {
            highlight: {
              border: '#2B7CE9',
              background: '#fff'
          },
          hover: {
            border: '#2B7CE9',
            background: '#D2E5FF'
          }
        },
        font: {
          size: 9
        },
        borderWidth: 2
      }

样本节点数据

{id: 9264, type: "db", title: "node-text", resource: "dascsvd", region: "xxxxx"}

Answer 1

对于vis-tooltip 类css 需要在悬停时动态应用。在我的情况下没有发生这种情况。该 css 来自 frpm popup.css 文件。我复制了这些 CSS 并添加到我的代码中。 现在它可以正常工作了

::ng-deep div.vis-tooltip {
  position: absolute;
  visibility: hidden;
  padding: 5px;
  white-space: nowrap;
  color: #000000;
  background-color: #f5f4ed;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #808074;

  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;

  z-index: 5;
}