Passing context to tooltip of ngx bootstrap

ngx-bootstrap tooltip
ngx-bootstrap tooltip position
ngx-bootstrap tooltip example
ngx-tooltip
ngx-bootstrap tooltip wrong position
ngx-bootstrap tooltip not working
ngx-bootstrap pagination example
ngx-bootstrap checkbox

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

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

Question: how to pass context to tooltip? � Issue #4775 � valor , ngx-bootstrap: 3.1.1 Angular: 6 Bootstrap: 4 How to pass context into tooltip? I see that tooltipContext is deprecated. I would have assumed� In this Angular Bootstrap tutorial, we’ll learn how to add bootstrap tooltips in the Angular 10/9/8 project by using the ng-bootstrap package. Tooltips are used to provide information to users in a floating container with some textual content.

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

Passing context to tooltip of ngx bootstrap – Onooks, 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� Attaches a tooltip handler to an element collection..tooltip('show') Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

@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;
  }
}

tooltip - ngx-bootstrap � Bit, Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and� A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu. Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. Demo Installation. npm install ngx-contextmenu; import ContextMenuModule into your app module; Usage Template

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

Tooltip, Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, You can optionally pass in a context when manually triggering a tooltip. Added option to define the html content of a tooltip using a TemplateRef, with context, using NgTemplateOutlet. valor-software / ngx-bootstrap. Watch 237 Star 5

Angular powered Bootstrap, Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead. You can optionally pass in a context when manually triggering a popover. ngx-bootstrap components - Fast and reliable Bootstrap widgets in Angular - 18 Javascript components. Examples: typeahead , progressbar , rating , popover , collapse

Ngx-Bootstrap, Bootstrap 3 and Bootstrap 4 widgets for Angular: autocomplete, accordion, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead, sortable, tabs. We put much effort making ngx-bootstrap modular so that you can implement� ngx-bootstrap is an Open Source (MIT Licensed) project, it's an independent project with ongoing development made possible thanks to the support of our awesome backers. If you also would like to show support or simply give back to Open Source community, please consider becoming a backer sponsor of ngx-bootstrap on OpenCollective .

Tooltip, Pass a string as tooltip content. Simple binding. Template; Component. <button type="button"� I am using angular 4 and ngx-bootstrap to open modals. All is working well, and I implement modals via a component. I can also pass data into the modal via the content property of the bsModalRef.

Comments
  • 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.
  • 👍 this the only source about this problem ,but I it 's look like the tooltipContext is deprecated 😔😔
  • @MuhammedAlbarmavi. Your solution is a good suggestion. Thanks for sharing sample code.
  • @Yiu Pang Chan - Please see an example posted below
  • It's a solution for one tooltip. It doesn't scale to an array of buttons that requires tooltips since I would have to keep track of which tooltip the user is hovering over.
  • good job 👍 ,all solution here is just a work around this problem , but I thing about we have to chose a new component the tooltip look like deprecated