Angular v20 introduced the ability to go zonless with "provideZonelessChangeDetection" but the popup placement of kendoTooltip with zoneless is offset.  If I add back the zone.js dependency then it works fine, but of course that's not ideal.

Code to reproduce is very simple:

<button kendoTooltip title="test tooltip">
  hi there
</button>

or here's a code sandbox sample forked from the tooltip overview example

Would you please modify this to work with zoneless?

Thank You.

I use an in-line editing Grid. On one column I have defined a tooltip like so:

*Template to define the tooltip and it's anchor, the reference to the directive in the grid and the template associated to it as well as the mouseover event that calls the tooltip. 

*This ios the column where the tooltip needs to be displayed

*This is the showTooltip method that allows the correct cells to trigger the display of the tooltip template on its anchor.

This works when the cell contains a value, however the cell is empty by default and since it's empty there is no style attribute to the cell until it contains a value so the tooltip is never displayed when the cell is empty.

I've tried applying an id to the column, to wrap it in a div with an id but they are always empty. I cannot target the cell using something other than the classList which is null when the cell is empty.

How can I identify the correct cell despite being empty to show the tooltip?

How can I have custom text for different cells?

Why is it so complicated to just implement a simple tooltip? Wouldn't be easy if there were a tooltip directive built-in to the grid i.e. [tooltiptext]="''Simple Tooltip"

Please refrain from using jQuery I am unfamiliar with its syntax and am using the Angular version of Kendo.

**This project is on Angular 17.2 and uses the Kendo 15.1 Libraries. I am aware there is a new version but it breaks all our theme variables.

Hey there,

I have a line chart with invisible markers.
The marker (and therefor the tooltip) should only appear when hovered or touched, which it does so far.

But for a touchscreen device the hitbox to trigger the tooltip on a marker that is not visible seems very small, so one has to be very exact in hitting the line, for me it usually takes 2 or 3 times to hit it correctly. Is there any possibility to increase the hitbox without showing and / or increasing the marker size? I found out increasing the marker size without showing the markers does not help either.

I tried various css modifications for k-marker something along these:

.k-marker {
    margin: 20px !important;
    background-color: yellow !important;
    padding: 50px !important;
    border: 2px solid red !important;
}

to get any visual representation or feedback, but nothing seems to work.

I am aware that I can increase line thickness, but visually this is not an option.

On a different note, once I hit one point, it seems easier to hit another point on that line. It seems somehow there is an "active" line, is it possible to preselect the "active" line to get a workaround?

Am I missing something?
Any help is appreciated.
Best regards,

Leo

In my project I have many tooltips for displaying different things. But I want to change the CSS properties of one tooltip in particular which will not affect the other tooltips. How to do it ,the method mentioned in the document doesn't seem to work.

<div kendoTooltip tooltipClass="my-class">

.my-class *{

color:black;

}

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.