Angular programmatically add ngbTooltip on event target doesn't work-CodePudding

I'm trying to add a tooltip on the clicked elements in my component view, which are mostly svg polygons and paths, I have tried this function to set the ngbtooltip attribute on the target clicked elements, but nothing is happening when I click an element and hover on it again, although the clicked element in my inspector appear to have the ngbtooltip attribute added

my View

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

my ts file

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

CodePudding user response：

Try this form https://ng-bootstrap.github.io/#/components/tooltip/examples#triggers

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

CodePudding user response：

You can use it this way

<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/app/tooltip-triggers.html