CODEWITHSUNDEEP
javascripthtmlangulartooltipngx-bootstrap
L. C.
L. C.

Reputation: 91

Passing context to tooltip of ngx bootstrap

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.com/ngx-bootstrap/#/tooltip

Upvotes: 3

Views: 9995

Answers (4)

L. C.
L. C.

Reputation: 91

@rkp9 Thanks for the codes. It does solve the issue, but it added viewDateRangeText, viewData, and setTooltipData in the TS codes.

I went with the approach @MuhammedAlbarmavi suggested, since it is without extra variables and functions. The comment on Github didn't have the configuration that we need for popover to act like a tooltip. I have it in the following.

<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
   [popoverContext]="{ view: view }"
   [popover]="tooltipTmpl"
   triggers="mouseenter:mouseleave"
   placement="top"
>
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

Upvotes: 3

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24406

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 🔥🔥

Updated 🚀🚀

incase you want to use my solation with array of views , you juest need to move ng-template to the body of the ngFor.

template

<ng-container *ngFor=" let view of views">
    <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>
    <br>
    <br>
</ng-container>

demo 🚀🚀

Upvotes: 4

rkparmar
rkparmar

Reputation: 142

@Yiu Pang Chan - you can have views array with following approach.

In app.component.html file

<div *ngFor="let view of views; let i = index">
   <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
      [tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
     Show me tooltip with html {{ view.title }}
   </button>
</div>

<ng-template #tooltipTmpl>
    <h4>
        {{ viewDateRangeText }}
    </h4>
    <div>
        <i>
      {{ viewData }}
   </i>
    </div>
</ng-template>

In app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
public viewDateRangeText: string;
public viewData: any;

  setTooltipData(view: any){
    viewDateRangeText = view.dateRangeText;
    viewData = view.data;
  }
}

Upvotes: 2

rkparmar
rkparmar

Reputation: 142

I have used bootstrap popover in my projects, so would recommend using popover.

Also, there was an issue created on GitHub but the user ended up using popover - https://github.com/valor-software/ngx-bootstrap/issues/4775

Upvotes: 3

Related Questions