如何用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

在你的模板中:

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

在你的控制器中:

@ViewChild('t') tooltip: NgbTooltip;

在你的方法中打开,比如提交:

this.tooltip.open();

确保加载模块并导入NgbTooltip

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

Answer 2

在官方文档中；

工具提示可以包含任意 HTML、Angular 绑定甚至指令！只需将所需的内容包含在 <template>元素中即可。

官方网站示例；

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