ng-bootstrap - ngbtooltip not working with [(ngModel)]

I'm new to angular 4 and bootstrap beta 2 and trying to use ngbtooltip to show tool tip text. 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="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<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">rlabel 4<span>*</span></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


Any idea why tooltip is not working correctly along with [(ngModel)]? Thanks

Answer1:

If you’re using angular then you should probably import the NgbTooltipModule to your component and add it as a import module in module.ts.

import { NgbTooltipModule } from ‘@ng-bootstrap/ng-bootstrap’

and

<ng-template #tipContent>your desired text </ng-template>

in your markup.

Please follow the documentation, tooltip, to make sure that [ngbTooltip]=“tipContent” tooltip has mentioned properly.

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:ng-bootstrap - ngbtooltip not working with [(ngModel)]