web-dev-qa-db-ja.com

bootstrap 4およびangular 2？

条件に基づいて入力フィールドのツールチップを表示したいのですが、使用したコードスニペットを次に示します。特定の変数に基づいてツールチップを表示したい。

<input type="text" class="form-control error-tooltip"
    focusFirst="false" ngbTooltip="{{error}}" 
    placement="bottom"
    triggers="manual" #t="ngbTooltip">
twitter-bootstrapangulartwitter-bootstrap-4
9
BHARAT ATHOTA

テンプレートで：

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

コントローラーで：

@ViewChild('t') tooltip: NgbTooltip;

メソッドを開くには、submitのように：

this.tooltip.open();

必ずモジュールをロードして、NgbTooltipをインポートしてください。

ドキュメントの例、コンテキストおよび手動トリガーを参照してください： https://ng-bootstrap.github.io/#/components/tooltip/examples

7
newan

ツールチップにngbTooltipを使用

例：

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

公式ドキュメント。

ツールチップには、任意の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>
1
ulubeyn

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>

Angular Powered Bootstrap

0
Rehman Gull