Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

305
Views
Angular programmatically add ngbTooltip on event target doesn't work

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 class="col py-2" #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");
  }
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Try this form 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>

about 4 years ago · Juan Pablo Isaza Report

0

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%2Fapp%2Ftooltip-triggers.html

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!