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,

I am using kendo-multiselecttree and i just simply wanna show all the selected items when hovering on the selected items

So here upon overing item1, i don't know how to get tooltip or something, please someone help me with it

Thank you.

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

Hello team,

i'm having an issue with kendotooltip component inside my angular application, it's working for desktop version but not for mobile version(although i added onshow="click" event and still not working).

there is many examples in stackblitz for kendotooltip that are not working when changing to mobile version .

i'm using the tooltip inside a child component that is called from other parent components .in fact if i test with a simple exemple it works, but if i add it inside my child component it does'nt work anymore(even if i add an empty div inside the parent component the tooltip dont work anymore).

please contact me for better understanding .