Can I set the active width for ngx-tooltip on an edge/link?

Question

I want to use a ngx-tooltip on an edge between two nodes. The ntx-tooltip works works find for both edges and nodes, just the edge is much smaller, thus the mouse must be accurately positioned to fire the tooltip popup.

<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>

score 0 · Answer 1 · answered Jun 26 '19 at 15:05

I would add an invisible line in the template, to make the mouseover area thicker:

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

And then style it like this (makes the stroke 12px thick, and invisible):

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

Can I set the active width for ngx-tooltip on an edge/link?

1 Answers1