Могу ли я установить активную ширину для ngx-tooltip на ребре / ссылке? - PullRequest
Новая
       18

Могу ли я установить активную ширину для ngx-tooltip на ребре / ссылке?

0 голосов
/ 04 апреля 2019

Я хочу использовать ngx-tooltip на ребре между двумя узлами.Работы 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>

1 Ответ

0 голосов
/ 26 июня 2019

Я бы добавил в шаблон невидимую строку, чтобы сделать область наведения мыши толще: 

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

А затем стилизовать его следующим образом (делает обводку толщиной 12 пикселей и невидимой): 

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