Embedding ng2 tooltip in ng2 smart table

I have already installed ng2-tooltip-directive and imported in app.module.ts.

I am trying to add a tooltip to ng2 smart table cell for overflow but valuePrepareFunction() is only adding the class nodelist. I am expecting it to add all the tooltip properties as well. Here is the snippet:

  NODEBLIST: {
    title: 'eNodeB',
    type: 'html',
    valuePrepareFunction: (data) => '<div class="nodelist" ngbTooltip="You see, I show up on click!" triggers="click:blur">' + data + '</div>',
    // type: 'string',
  },

and when I inspect the elements it only shows the class was added:

<div class="nodelist">KSL05836 KSL09836R</div>

any insight on how to get the tooltip properties to be added would be greatly appreciated!

Solution

Angular Binding is not possible within the function valuePrepareFunction so better you drop the plan of html and use the custom component option instead.

 NODEBLIST: {
    title: 'eNodeB',
    type: 'custom',
    renderComponent: TooltipComponent
  },

component

Its just the sample code, you can modify as per your requirement.

import { Component, OnInit, Input, EventEmitter, Output, NgModule } from '@angular/core';

    @Component({
      selector: 'tooltip-view',
      template: `
        <div class="nodelist" ngbTooltip="You see, I show up on click!" triggers="click:blur">{{rowData.eNodeB}}</div>
      `,
    })

    @NgModule()
    export class TooltipComponent{
      renderValue: string;

      @Input() value: string | number;
      @Input() rowData: any;

    }

entryComponents

@NgModule({
  imports:      [ BrowserModule, FormsModule, Ng2SmartTableModule ],
  entryComponents: [CustomComponent]
})
export class AppModule { }

Note : Since the code is written in the stackoverflow editor directly, there could be typo or syntactical error. Please correct yourself.