twitter-bootstrap - 如何显示带有Bootstrap 4和Angle 2的工具提示？

我想根据条件显示输入字段的工具提示，这是我使用的以下代码片段。我想显示基于特定变量的工具提示。

<input type="text" class="form-control error-tooltip"
    focusFirst="false" ngbTooltip="{{error}}"
    placement="bottom"
    triggers="manual" #t="ngbTooltip">

最佳答案

在您的模板中:

 <input type="text" class="form-control" formControlName="name" placeholder="placeholder" ngbTooltip="tipContent" #t="ngbTooltip" >

在您的 Controller 中:

@ViewChild('t') tooltip: NgbTooltip;

在您的方法中打开，例如submit:

this.tooltip.open();

确保jo加载模块并导入NgbTooltip

请参阅doc中的示例，上下文和手动触发器:https://ng-bootstrap.github.io/#/components/tooltip/examples