如何使用bootstrap 4和angular 2顯示工具提示？

Question

我想根據條件顯示輸入字段的工具提示，下面是我用過的代碼片段。我想顯示基於特定變量的工具提示。

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

Answer 1

在官方文檔中，

工具提示可以包含任何HTML，Angular綁定甚至指令！只需將所需內容附加到< 模板>元素中即可。

來自official site的示例;

@ViewChild('t') tooltip: NgbTooltip; 

在你的方法來打開，如提交：

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

在你的控制器

：

<template #tipContent>Hello, <b>{{name}}</b>!</template> 
<button type="button" class="btn btn-secondary" [ngbTooltip]="tipContent"> 
    I've got markup and bindings in my tooltip! 
</button> 

Answer 2

在你的模板

this.tooltip.open(); 

確保祚加載模塊並導入NgbTooltip

見例如，語境和手動觸發，在doc：https://ng-bootstrap.github.io/#/components/tooltip/examples

Answer 3

使用ngbTooltip工具提示

例：

<i data-toggle="tooltip" data-placement="top" ngbTooltip="your message">?</i>