Passing a custom variable to ToolTip template

[James]

I have seen following example https://www.telerik.com/kendo-angular-ui/components/tooltip/templates/ which shows how to use a template to render custom content for a tooltip, however it only shows very basic example of passing an "anchor" to the template, I would like to pass in a variable to the template, how do I do that?

In below example, I would like to pass the dataItem from within a ngFor to the template so that I can render custom tooltip content based on the data in dataItem,

<ng-template #approvalColTooltipContentTemplate let-dataItem>
{{dataItem | json}}
</ng-template>
<div *ngFor="let dataItem of dataItems">
     <div kendoTooltip filter=".gridTooltip" [ tooltipTemplate]="approvalColTooltipContentTemplate">
          <span class="gridTooltip"><span class="k-icon warningGreen"></span></span>
          <span class="gridTooltip"><span class="k-icon warningOrange"></span></span
          <span class="gridTooltip"><span class="k-icon k-i-warning"></span></span>
     </div>
</div>

[Dimiter Topalov]

Hi James,

Indeed, the Tooltip typically relies on displaying the title attribute of its anchor elements much like the regular HTML tooltip. The template allows the developer to customize the content, and also to display other attributes or the content of the anchor element. There is no concept of a "dataItem" related to the rendered markup via the *ngFor loop, but you can add custom data-attributes to the rendered DOM elements, and use this to implement some custom logic for displaying the properties of the respective data item in the Tooltip, e.g.:

https://stackblitz.com/edit/angular-zlsvkh?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[James]

Yes this helps, Thanks

[Serhat]

Hi,

 

I am trying something similar to James, in that I would like to pass a custom value to the Tooltip, however when applied to a treelist. The idea is that there are certain properties of the array that is displayed in the treelist, that are not presented via a seperate column, but rather only when you hover over the first column of the treelist. As a reference you can see this stackblitz: http://stackblitz.com/edit/angular-rla8zp?file=app%2Fapp.component.ts

I've tried to bind the Tooltip template via the class attribute to the first column of the treelist however the attribute I am setting is not read. The final aim in the example would be to display the properties locked and lockedUser from the treelist-data that is held in the filesystem.ts. In that case the variable test would have to be replaced by a function, which looks up the value of these properties for the current gridcell.

 

Thanks a lot for any help!

[Dimiter Topalov]

Hi Serhat,

There are two viable approaches to achieve the desired functionality:

1) Handle the DOM mouseover event of the TreeList wrapper element, and perform some custom logic to conditionally display the Tooltip only if the event target is an element from the first column. For example, the developer can add a custom class to all column cells via the column class option.

Then nest a custom element within the template that will have the desired data item properties as data-attributes, and access and display those attributes within the Tooltip template. Here is a sample implementation, demonstrating this approach:

https://stackblitz.com/edit/angular-rla8zp-tvbxv2?file=app/app.component.ts

2) Customize the built-in TreeList styling so that a custom (e.g. SPAN) element that will fill all space, available from the hierarchy-related icons, will be rendered within each cell. Then add the desired information as data-attributes to this SPAN, and rely on the built-in Tooltip filter property to display the tooltip over these elements only. Again, access and display the data-attributes within the Tooltip template. Here is the updated example:

https://stackblitz.com/edit/angular-rla8zp-q2qi3y?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Serhat]

 

Hi Dimitar, thank you for the quick response, this helps a lot!

Kind regards, Serhat

[Samuel]

Hi

 

I'm having the same issue as James above.

In the stackblitz you provided, I'm trying to pass dataItem to the template ;

 

 <span class="gridTooltip" [attr.dataTooltip]="dataItem">
    <span class="k-icon k-i-warning"></span>
  </span>

because I want to use various properties of the dataItem object

 

  <ng-template #approvalColTooltipContentTemplate let-anchor>
      {{anchor.nativeElement.getAttribute('dataTooltip').someProperty}}
    </ng-template>

Inside the template anchor.nativeElement.getAttribute('dataTooltip') is an object but i cannot access any of its properties, they seemed undefined. How would you pass the object instead of just a single property ?

[Zornitsa]

Hi Samuel,

The described issue occurs since the default behavior of Angular attribute binding is to resolve the passed expression to a string. This means that the value declared in the template would be the string - "[Object Object]", not the actual data item object, which is the reason why none of its properties can be accessed. 

To overcome this behavior, I would suggest using the json pipe to convert the dataItem objects to a JSON string format when performing the attribute binding:

<span class="gridTooltip" [attr.dataTooltip]="dataItem | json">
      <span class="k-icon k-font-icon k-i-warning"></span>
</span>

After that, the JSON string should be again parsed to an object in order to access its specific properties when declaring it in the template by using the JSON.parse() method. This can be implemented in a separate function or by configuring a custom pipe:

<ng-template #approvalColTooltipContentTemplate let-anchor>
      {{parseToJson(anchor.nativeElement.getAttribute('dataTooltip')).id}}
</ng-template>

public parseToJson(dataItem): any{
     return JSON.parse(dataItem);
}

Below I am linking two StackBlitz examples for observation of both approaches:

• Using a function - https://stackblitz.com/edit/angular-mx664u 
• Using a pipe - https://stackblitz.com/edit/angular-mx664u-namnrm

Lastly, since font icons are used in the example from this thread, I want to mention that as the font icons are no longer delivered with the Kendo UI themes since the v14.0.0 release of Kendo UI for Angular, they now have a different setup and should be loaded separately either by using the precompiled CSS or through a CDN link.

I hope the provided information is helpful.

Regards,
Zornitsa
Progress Telerik

[Samuel]

thank you very much, that helped a lot !