Kendo Grid ToolTip with line break

[Hadas]

HI,

I am using the Kendo grid tooltip with angular 4 as is this example

https://stackblitz.com/edit/angular-3yujdm-eqvgqg?file=app/app.component.ts

 

When I have a long tooltip in my title is it possible to add a line break without using ng-template?

 

Thanks 

[Dimiter Topalov]

Hello Hadas,

You set the Tooltip width via the tooltipWidth option and longer text will be wrapped automatically:

https://stackblitz.com/edit/angular-3yujdm-89ty7j?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Hadas]

Thank you for the reply.

But your solution is not enough for me, since I have different lengths of tooltips some have a few line breaks in them.

Is there another way I can do this?

[Dimiter Topalov]

Hi Hadas,

The suggested solution will wrap the text so longer text will be rendered in more lines than shorter one, e.g. it will have as many line breaks as necessary so that all content is displayed in the provided width (height will vary), e.g.:







Can you please specify in further details what the desired behavior and layout is (ideally with some visual like screenshot) and how it differs from the current one, so I can try to provide an alternative approach that is better suited to the specific scenario, if one is available? Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Hadas]

I guess I wasn't clear enough

I need my tool tip to look like this , for example:

Name: Hadas

Age: 25

City: NY

 

In your solution it might look like this :

Name: H

adas Age:

25 City: N

Y

Was I clear enough?

 

 

 

[Dimiter Topalov]

Hi Hadas,

Thank you for the clarification. In this case using the Tooltip template seems the only option as you can provide the desired line breaks in the markup, e.g.:

https://stackblitz.com/edit/angular-3yujdm-jano3l?file=app/app.component.ts

You can pass all data item properties that have to be displayed in the Tooltip like custom attributes of the anchor element.

Regards,
Dimiter Topalov
Progress Telerik

[jpw]

This worked in my case. Thanks!

[Hadas]

Hi,

The example you put in the reply doesn't work well. the tooltip doesn't show the value from the dataItem

{{ anchor.nativeElement.getAttribute("prname") }} = null

What can be done?

Thanks

 

 

 

[Dimiter Topalov]

Hi Hadas,

The runnable examples are for illustrative purposes only and are not supposed to be a full-blown solution, but rather to demonstrate how would a suggested idea work in the context of the Kendo UI for Angular components.

For example, the last demo shows how to bind custom attributes to the elements within the Grid cell template so that data item property values can be "transferred" from the Grid to the Tooltip template and used accordingly within it.

Further custom logic would be required to display some (or all) of the data item properties within the template depending on which of the properties are bound as attributes on the SPAN element. For example the following adjustment demonstrates how to display only the properties that are actually present as attributes:

https://stackblitz.com/edit/angular-3yujdm-jano3l?file=app/app.component.ts

The Tooltip template looks like this:

<ng-template #template let-anchor>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('id')"><span>ID: {{ anchor.nativeElement.getAttribute("id") }}</span><br /></ng-container>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('prname')"><span>Name: {{ anchor.nativeElement.getAttribute("prname") }}</span><br /></ng-container>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('price')"><span>Price: {{ anchor.nativeElement.getAttribute("price") }}</span><br /></ng-container>
   <ng-container *ngIf="anchor.nativeElement.getAttribute('quantity')"><span>Quantity: {{ anchor.nativeElement.getAttribute("quantity") }}</span><br /></ng-container>
   </ng-template>

Entries are displayed only if the SPAN element, used in the Grid template has the respective custom attributes. Thus the Tooltip for the first column displays the Name, Price, and Quantity:

<kendo-grid-column field="ProductID" title="ID" width="40" [title]="dataItem?.ProductID">
              <ng-template kendoGridCellTemplate let-dataItem>
                <span [attr.prname]="dataItem.ProductName"
                  [attr.price]="dataItem.UnitPrice"
                    [attr.quantity]="dataItem.QuantityPerUnit">{{dataItem.ProductID}}</span>
              </ng-template>
            </kendo-grid-column>

... while the Tooltip for the second column displays the ID and Name only:

<kendo-grid-column field="ProductName" title="Name" width="250">
             <ng-template kendoGridCellTemplate let-dataItem>
               <span [title]="dataItem.ProductID"
                 [attr.id]="dataItem.ProductID"
                 [attr.prname]="dataItem.ProductName"
               >{{dataItem.ProductName}}</span>
             </ng-template>

 
Regards,
Dimiter Topalov
Progress Telerik

[Hadas]

Now it works.

I had a problem with setting this [attr.prname]

But now its Ok

Thanks

[Graham]

Put <br> into the tooltip text where you want a line break.

[Marcus]

Put "\n" into the tooltip text where you want a line break and add a specific tool tip css class which supports line breaks.

This is also useful for tooltips that display text entered by users with line breaks.

<span kendoTooltip class="k-icon k-i-info" [title]="'Open tasks:\n- Task 1\n- Task 2'" tooltipClass="my-tooltip-with-linebreak"></span >

.my-tooltip-with-linebreak {
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
}