CODEWITHSUNDEEP
javascriptangularngx-bootstrap
hellzone
hellzone

Reputation: 5236

How to trigger tooltip from javascript?

I am trying to trigger ngx-bootstrap Tooltip from javascript. Below code is working without any problem. Now I want to call show() function from javascript side manually.

Problem is I don't know what "bs-tooltip" is. Is it an id of element created by ngx-bootstrap. If so how can I get this element from javascript?

Ngx-bootstrap Tooltip

<p>
  <span tooltip="Hello there! I was triggered manually"
        triggers="" #customTooltip="bs-tooltip">
  This text has attached tooltip
  </span>
</p>

<button type="button" class="btn btn-success" (click)="customTooltip.show()">
  Show
</button>
<button type="button" class="btn btn-warning" (click)="customTooltip.hide()">
  Hide
</button>
<button type="button" class="btn btn-info" (click)="customTooltip.toggle()">
  Toggle
</button>

EDIT: 

document.getElementById("bs-tooltip")  //returns null

Upvotes: 1

Views: 1215

Answers (1)

Faly
Faly

Reputation: 13346

Try to use viewChild to acces the customTooltip in your component's class:

import { ViewChild } from '@angular/core';

export class YourComponent {
    @ViewChild('customTooltip') tooltip: ElementRef;
    onClick() {
        this.tooltip.show();
    }
}

<span #customTooltip="bs-tooltip" tooltip="Hello there! I was triggered manually" triggers="" > This text has attached tooltip</span>

Upvotes: 3

Related Questions