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,

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:

Hi,

Can we apply tooltip to the dropdown items for kendo-dropdownlist?
Note: The same is implemented in the jquery Add tooltip to dropdown items in Kendo UI for jQuery | Telerik Forums. But here I need to implement without using jquery.

Thanks,

Karan Shah

Hi, I've got a button that toggles a boolean property when clicked. The button has a tooltip that appears on hover, and the tooltip text is set conditionally based on if the property is true or false.

The issue I'm having is that if the button is clicked, the tooltip only changes once you hover outside the button and then hover back over it, it does not change when the button is clicked if the cursor stays hovering on the button.

Is it possible to have the tooltip text change when the button is clicked, if the cursor stays on the button?

app.component.html:

<button
  (click)="toggleProp()"
  kendoTooltip
  [title]="prop ? 'text when prop is true' : 'text when prop is false'"
>
  test
</button>

app.component.ts:

export class AppComponent {
  prop = false;

  toggleProp() {
    this.prop = !this.prop;
  }
}

Demo: https://stackblitz.com/edit/angular-goykum-okj6jk?file=app%2Fapp.component.html

Hello,

I have a button that has a tooltip.  I have a requirement to add a hyperlink inside this tooltip. When I hover the the button, this tooltip should appear with a hyperlink inside. I can click on this link to navigate to an external site like https://www.telerik.com/kendo-angular-ui. 

Is it possible to have a hyperlink inside a tooltip for Kendo UI for Angular?

Thank you in advance for your help.

Hey there,

I'm currently developing a web app and making use of KendoUI, with a specific focus on the KendoTooltip component. However, I'm facing an issue when trying to use it with a native HTML5 dialog. The tooltip doesn't seem to display above the dialog.

Update: I just realized, that all components using KendoPopup are affected. So when I open a dropdown it's hidden in the background as well.

It's worth noting that the native HTML5 title attribute works just fine in this scenario.

I've even forked one of your examples to demonstrate the problem: Tawij7 (forked) - StackBlitz

If anyone has insights or suggestions on how to make the KendoTooltip work seamlessly with native HTML5 dialogs, I'd greatly appreciate your help!

Thanks in advance!

Is there a straightforward way to render tooltip only if content was overflown? 

.some-element {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Hi

I have a very simple drawer: 

    <kendo-drawer
      #drawer
      [items]="items"
      [mini]="true"
      mode="push"
      [(expanded)]="expanded"
      (select)="onSelect($event)"
      [autoCollapse]="false"
    >
    </kendo-drawer>

and I would like to display the item.text as a tooltip when the drawer is minimized... I tried a couple of things but cannot seem to get this working correctly

Thanks in advance

Ursus

We are localizing our application for the first time and have started to pull the key/translations from the yml files in @progress/kendo-angular-messages.

So far we have noticed that the en-US and fr-CA files are missing target values for the following:

• kendo.chat.*
• kendo.multiviewcalendar.*

If we run the command: "npx kendo-translate src/locale/messages.fr.xlf --locale fr-CA", the resulting file is missing target elements for meanings like kendo.chat.send and kendo.multiviewcalendar.today.

It looks like there are other missing packages as well like kendo.colorpicker.*, kendo.stepper.*, and kendo.tooltip.*.

This is a problem for us because we aren't using the Angular i18n built-in support.  Instead, we are using ngx-translate and have implemented our own MessagingService for the kendo strings, using the English files in the kendo-angular-messages as the source for the key/value pairings and for translation.  As a result, if the ids aren't in the yml files, we end up with keys displaying in our UI like this:

Would it be possible to update the kendo-angular-messages repo to contain all the strings, at least in English?

I have a bar chart in which I am showing tooltip when user hovers on series(bars). Now I want to show an icon (X) to let user close the tooltip instead of auto close. I tried closable="true" but it is not working on kendo-chart-series-item-tooltip. (The popup which gets opened on series hover has customized logic inside which shows 3-4 lines inside a div )

So I want an icon inside the tooltip so that when user clicks on that X icon then only the tooltip should close. 

Please refer the attached image for better understanding of my requirement.