0

Can anyone share the sample code with ngbTooltip & ngbtypeadhead controls with [(ngmodel)] in Angular 4 & Typescript?

Here is my issue: Tooltip on the label is working fine when only input does not have [(ngModel)]. As soon as I used [(ngModel)] in input text control, tooltip is showing only for the first label and other labels does not. In the below code, if I remove ngModel, all labels tooltips are shown as expected.

    `<div class="col-lg-12 col-md-12 col-sm-12 ">
  <div class="col-lg-12 col-md-12 col-sm-12  container accordion" id="accordion">
    <div id="collapseDealSummary" class="col-lg-12 col-md-12 col-sm-12  card-block collapse show row">
      <div class="col-lg-12 col-md-12 col-sm-12 card-body row">
        <div class="col-lg-6 col-md-12 col-sm-12">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1" placement="top" triggers="hover" ngbTooltip="Tooltip on for label 1">
                <label>label 1<span>*</span></label>
                <input type="text" class="form-control" id="txtid" name="txtid" [(ngModel)]="Label1Value" />
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1" placement="top" triggers="hover" ngbTooltip="Tooltip on for label 2">
                <label>label 2<span>*</span></label>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1">
                <label placement="top" triggers="hover" ngbTooltip="Tooltip on for label 3">label 3<span>*</span></label>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1">
                <label placement="top" triggers="hover" ngbTooltip="Tooltip on for label 4">label 4<span>*</span></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>`

Any idea why tooltip or any ng-bootstrap controls are not working correctly along with [(ngModel)]? Thanks

user9085943
  • 51
  • 1
  • 4
  • Share which sample code? [Here](https://ng-bootstrap.github.io/#/components/typeahead/examples) is the example for the typeahead and [here](https://ng-bootstrap.github.io/#/components/tooltip/examples) is the one for the tooltip. Please edit your question and add details to your question: what do you want to achieve and what isn't working. How do you want to combine the two components? When should the tooltip appear? – ventiseis Dec 13 '17 at 22:18
  • Added in-line code highlighting, although I may have done so inaccurately for the "with[(ngmodel)]" part. – Engineero Dec 13 '17 at 22:49
  • This is my issue: Tooltip on the label is working fine when only input does not have [(ngModel)]. As soon as I used [(ngModel)] in input text control, tooltip is showing only for the first label and other labels does not. In the below code, if I remove ngModel, all labels tooltips are shown as expected. The sample code in this link: https://stackoverflow.com/questions/47776882/ng-bootstrap-ngbtooltip-not-working-with-ngmodel – user9085943 Dec 14 '17 at 16:16

0 Answers0