如何从javascript触发工具提示？答案

【问题标题】：How to trigger tooltip from javascript?如何从javascript触发工具提示？
【发布时间】：2018-03-23 19:03:37
【问题描述】：

我正在尝试从 javascript 触发 ngx-bootstrap 工具提示。下面的代码工作没有任何问题。现在我想从 javascript 端手动调用 show() 函数。

问题是我不知道“bs-tooltip”是什么。它是 ngx-bootstrap 创建的元素的 id。如果是这样，我怎样才能从 javascript 中获取这个元素？

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

编辑：

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

【问题讨论】：

标签： javascript angular ngx-bootstrap

【解决方案1】：

尝试使用viewChild 来访问组件类中的customTooltip：

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>

【讨论】：

您的代码运行良好，但我收到“'ElementRef' 类型上不存在属性 'show'。”错误。有没有办法处理这个错误？
尝试给工具提示元素一个类型：import {TooltipDirective } from 'ngx-bootstrap';@ViewChild('customTooltip') tooltip: TooltipDirective;