I'm working with tooltip in ngx-bootstrap, and want to pass data to the ng-template being to the tooltip. The documentation provides [tooltipContext], but it didn't seem to be working. I have provided a code snippet.

HTML:

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
    *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl"
    [tooltipContext]="{view: view}"
    containerClass="white-tool-tip"
    placement="top"
                    >
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

REF:

I'm working with tooltip in ngx-bootstrap, and want to pass data to the ng-template being to the tooltip. The documentation provides [tooltipContext], but it didn't seem to be working. I have provided a code snippet.

HTML:

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
    *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl"
    [tooltipContext]="{view: view}"
    containerClass="white-tool-tip"
    placement="top"
                    >
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

REF: https://valor-software./ngx-bootstrap/#/tooltip

• javascript
• html
• angular
• tooltip
• ngx-bootstrap

• Tooltips are meant to be text-only and not HTML. Use popover and give it a custom class to make it look like whatever you were trying to achieve with tooltips. – Amir Savand Commented Jan 16, 2020 at 10:15

4 Answers 4

I have face the same problem , so far I have check the source code the tooltipContext mark as deprecated you can do a work a round thi like this

you can still access to the view property inside the ng-template

<button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>

<ng-template #tooltipTmpl>
    <h4>
        {{ view.dateRangeText }}
    </h4>
    <div>
        <i>
      {{ view.data }}
   </i>
    </div>
</ng-template>

demo