How to trigger tooltip from javascript?

Question

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

Faly · Accepted Answer · 2018-03-23 11:03:37Z

3

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>

answered Mar 23, 2018 at 11:03

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hellzone Over a year ago

Your code is working fine but I am getting "Property 'show' does not exist on type 'ElementRef'." error. Is there any way to handle this error?

Faly Over a year ago

Try to give a type to the tooltip element: import {TooltipDirective } from 'ngx-bootstrap'; @ViewChild('customTooltip') tooltip: TooltipDirective;

Collectives™ on Stack Overflow

How to trigger tooltip from javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related