angular - 我可以在边缘/链接上设置 ngx-tooltip 的活动宽度吗？

Question

我想ngx-tooltip在两个节点之间的边缘上使用 a 。ntx-tooltip作品发现了边和节点，只是边要小得多，因此必须准确定位鼠标才能触发工具提示弹出窗口。

<ng-template #linkTemplate let-link>
  <svg:g class="edge"
    ngx-tooltip
    [tooltipPlacement]="'top'"
    [tooltipType]="'popover'"
    [tooltipTitle]="link.direction"
  >
    <ng-container [ngSwitch]="link.direction">
      <svg:path
        *ngSwitchCase="'ToFrom'"
        [ngStyle]="pathStyle(link.source, link.target, link.direction)"
        class="line"
        stroke-width="3"
        marker-start="url(#arrow)"
        marker-end="url(#arrow)"
      >
      </svg:path>
      <svg:path
        *ngSwitchCase="'FromOnly'"
        [ngStyle]="pathStyle(link.source, link.target, link.direction)"
        class="line"
        stroke-width="3"
        marker-start="url(#EndMarker)"
        marker-end="url(#arrow)"
      >
      </svg:path>
      <svg:path
        *ngSwitchCase="'ToOnly'"
        [ngStyle]="pathStyle(link.source, link.target, link.direction)"
        class="line"
        stroke-width="3"
        marker-start="url(#arrow)"
        marker-end="url(#EndMarker)"
      >
      </svg:path>
    </ng-container>
    <svg:text class="edge-label" text-anchor="middle">
      <svg:textPath class="text-path" [attr.href]="'#' + link.id"
        [style.dominant-baseline]="link.dominantBaseline" startOffset="50%"
      >
        {{link.label}}
      </svg:textPath>
    </svg:text>
  </svg:g>
</ng-template>

Answer 1

我会在模板中添加一条不可见的线，以使鼠标悬停区域更厚：

<svg:path class="invisible-line" [attr.d]="link.line"></svg:path>

然后像这样设置它的样式（使笔划厚 12px，并且不可见）：

.invisible-line {
  stroke-width: 12px;
  stroke: rgba(0, 0, 0, 0.001);
}