Add breakline to the tooltip content

[Mithali]

Kendo tooltip not recognizing the <br> tag so whatever we pass it is taking in a string format. Even if we pass the content with break line still it is take as a single string value. Tried different ways to alter the existing logic still didn't work.

 

Actual output: "First<br>Second<br>Third"

Expected output:

First

Second

Third

 

HTML:

   

<kendo-grid [data]="rowData" style="height:300px" [resizable]="true">

<kendo-grid-columnfield="charge_Desc"title="Filed Charges"[width]="150"[headerStyle]="{'font-weight': 'bold'}">

      <span kendoTooltip [title]="dataItem.victims">

        <ng-template kendoGridCellTemplate let-dataItem>

          <div [innerHTML]="formatDescription(dataItem.charge_Desc)"></div>

        </ng-template>

      </span>

</kendo-grid-column>

</kendo-grid>

 

 

TS:

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

import { bailBondTabRowData } from 'src/app/models/constants';

import { ConsolidateSubjectService } from 'src/app/services/consolidate-subject.service';

@Component({

  selector: 'app-bail-bond-tab',

  templateUrl: './bail-bond-tab.component.html',

  styleUrls: ['./bail-bond-tab.component.scss']

})

export class BailBondTabComponent implements OnInit {

  columnDefs: any[] = [];

  rowData:any;

  public tooltipShowDelay = 0;

  public tooltipHideDelay = 2000;

  @Input() bailBondData:any;

  toolTipContent: any;

  constructor(public ConsolidateSubjectService:ConsolidateSubjectService) {

    this.columnDefs = bailBondTabRowData;

   

  }

  ngOnInit() {

      console.log(this.bailBondData,"Notes_Text");

      this.rowData = this.bailBondData.map((item:any) => ({

        ...item,

        Event_Date:this.ConsolidateSubjectService.convertDateFormat(item.Event_Date)

      }));

  }

  formatDescription(charge_Desc: string): string {

    return charge_Desc.replace(/(?:\r\n|\r|\n)/g, '<br>');

  }

}

 

 

[Zornitsa]

Hi Mithali,

Thank you for the provided code snippet.

Based on the configuration of the Tooltip component shown in the snippet, I noticed that the title attribute is bound to a dataItem field, which in this case would be inaccessible since it is referenced outside of the CellTemplateDirective where the dataItem is declared. 

In this line of words, I would rather suggest configuring the Tooltip component by wrapping the whole Grid inside the kendoTooltip directive and setting its filter property to a suitable selector for the cells:

<span kendoTooltip 
       showOn="hover"
       [tooltipTemplate]="template"
       filter=".k-grid td">
            <kendo-grid [data]="gridData">
                ...
            </kendo-grid>
</span>

After that, the developer could provide a custom template for the Tooltip, in which your approach with the innerHTML binding to a text formatting method can be applied:

<ng-template #template let-anchor>
       <span [innerHTML]="format(anchor.nativeElement.innerText)"></span>
</ng-template>

Here is a StackBlitz example, in which the desired behavior can be observed by implementing the above suggestions:

• https://stackblitz.com/edit/angular-sakvx6 

Hope the provided information is helpful for your scenario. I remain at your disposal in case of any further questions.

Regards,
Zornitsa
Progress Telerik