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

使用ngbTooltip获取工具提示

例如：

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

Answer 3

使用'disableTooltip'，它需要一个布尔值。

<label placement="top" [ngbTooltip]='Your message ' [disableTooltip]='Your condition' class="col-md-3">

我在标签上用过，对我有用。

Answer 4

在官方文件中;

工具提示可以包含任意HTML，Angular绑定甚至指令！只需将所需内容包含在＆lt; 模板＆gt;中;元件。

来自official site;

的示例

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

使用Bootstrap 4工具提示

<button type="button" class="btn btn-outline-secondary mr-2" placement="top" ngbTooltip="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-outline-secondary mr-2" placement="right" ngbTooltip="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-outline-secondary mr-2" placement="bottom" ngbTooltip="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-outline-secondary mr-2" placement="left" ngbTooltip="Tooltip on left">
  Tooltip on left
</button>

known bugs

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

5 个答案: