我可以在边缘/链接上为ngx-tooltip设置有效宽度吗?

时间:2019-04-03 22:06:10

标签: angular svg ngx-bootstrap ngx-graphs

我想在两个节点之间的边缘上使用ngx-tooltipntx-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>

1 个答案:

答案 0 :(得分:0)

我会在模板中添加一条不可见的线,以使鼠标悬停区域变粗:

size1

然后像这样设置它的样式(使笔触厚12px,并且不可见):

SUM(product_count+product_count2) AS product_count, size1 FROM