Angular 以编程方式在事件目标上添加 ngbTooltip 不起作用答案

【问题标题】：Angular programmatically add ngbTooltip on event target doesn't workAngular 以编程方式在事件目标上添加 ngbTooltip 不起作用
【发布时间】：2022-02-10 20:48:35
【问题描述】：

我正在尝试在组件视图中的单击元素上添加工具提示，这些元素主要是 svg 多边形和路径，我试过这个函数来设置目标点击元素的 ngbtooltip 属性，但是当我单击一个元素并再次将鼠标悬停在它上面时什么都没有发生，尽管在我的检查器中单击的元素似乎添加了 ngbtooltip 属性

我的观点

<div class="col py-2" #ngbTooltipp>
    <!-- poc only -->
    <svg-icon (click)="selectSector($event)" [src]="mapPath" [svgStyle]="{ 'width.px':675}"></svg-icon>
  </div>

我的 ts 文件

 public selectSector($event: MouseEvent) {
    // set the tooltip
    let clickedEl = $event.target;
    this.renderer.setAttribute(clickedEl, "ngbtooltip", "hello");
  }

【问题讨论】：

标签： javascript html css angular ng-bootstrap

【解决方案1】：

试试这个表格https://ng-bootstrap.github.io/#/components/tooltip/examples#triggers

<div class="col py-2" #ngbTooltipp>
    <!-- poc only -->
    <svg-icon ngbTooltip="You see, I show up on click!" triggers="click:blur" [src]="mapPath" [svgStyle]="{ 'width.px':675}"></svg-icon>
  </div>

【讨论】：

谢谢阿曼，但是点击的元素不是本身，而是 svg 元素的子元素（，...），所以这里我需要在点击事件的目标上添加工具提示

【解决方案2】：

你可以这样使用它

<button type="button" ngbTooltip="You see, I show up on click!" >
  Click me!
</button>

<div>
 <ng-containt ngbTooltip="You see, I show up on click!" > Click 
   <svg-icon name="eye" [svgStyle]="{ 'width.px':90 }"></svg-icon>
 </ng-containt> 
</div>

https://stackblitz.com/edit/angular-funyr5?file=src%2Fapp%2Ftooltip-triggers.html

【讨论】：

hanks Siddhartha，但他点击的元素不是本身，而是 svg 元素的子元素（、...），所以我想以编程方式使用单击的目标添加工具提示
你可以使用
点击