tooltip issue and ngbTooltip

[Dev C]

I would like to have tooltip appear only if incoming string length is > 35 and also if that is the case add ellipses [...] at the end of the string, I am using angular 6

my main component.html file as below

<tr *ngFor = "let data of datas" >
<td><span [ngbTooltip] ="showTooltip">{{data.name}}</span></td>
<ng-template #showTooltip>
      <my-tooltip [data]="data.name"></my-tooltip>
</ng-template>
</tr>

In My Tooltip component.ts file

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

@Component({
  selector: 'my-tooltip',
  templateUrl: './tooltip.component.html'
})
export class ToolTipComponent implements OnInit {
  @Input() data: any;

  ngOnInit(){
      console.log("tooltip" + this.data);
  }

}

in tooltip.component.html

<div class="tooltip">{{data}}</div>

However the result display black small box without any data into it.

What is missing here, if anyone can look into this, also I need to add elipses if incoming string is more then 35 characters and then and then tooltip should be displayed.

--
Sent from my mi note 4 phone.