web-dev-qa-db-fra.com

comment afficher l'info-bulle avec bootstrap 4 et angular 2?

Je souhaite afficher l'info-bulle du champ de saisie en fonction de la condition. Voici l'extrait de code suivant que j'ai utilisé. Je veux afficher des info-bulles basées sur une variable spécifique.

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

dans votre modèle:

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

dans votre contrôleur:

@ViewChild('t') tooltip: NgbTooltip;

dans votre méthode pour ouvrir, comme submit:

this.tooltip.open();

assurez-vous que jo chargez les modules et importez NgbTooltip

Voir l'exemple, Déclencheurs contextuel et manuel, dans la doc: https://ng-bootstrap.github.io/#/components/tooltip/examples

7
newan

Utilisez ngbTooltip pour l'info-bulle

Ex:

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

Dans les documents officiels; 

Les info-bulles peuvent contenir du HTML arbitraire, des liaisons angulaires et même des directives! Placez simplement le contenu souhaité dans un élément <template>.

Exemple de site officiel ;

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