The first time the tooltip shows, it is positioned in the middle of the item. Subsequently, it is positioned correctly. Here is a dojo.

If you hover over any of the boxes, the first time the tooltip shows it is pointing to approximately the bottom of the first line of text in the box. Subsequently, the tooltip is shown pointing to the top of the box (or the bottom, for the first box).

I am basing this off an old thread and its jsbin so it is certainly possible I'm doing something wrong.

Added bonus: sometimes the tooltip doesn't auto-hide. I haven't figured out the details of that yet.

Hi, 

AS my title says, how do I add a tooltip to a disabled kendoButton, for the purpose of telling a user why its disabled.

Dojo: https://dojo.telerik.com/OTOpIrOV

Thanks, 

Grant

Hi,

Currently am displaying a tooltip in header using the below code. however i want to display a image inside tooltip.

{

    field: 'country', title='country', headerTemplate: "<u class='uom fa fa-info-circle fa-lg' data-container='body' title='' data-toggle='tooltip' data-original-title='Golden Standard'></u>"

}

i.e., something like this. but when i try the below code, the html inside the 'data-original-title' is showing as plain text instead of rendering as html.

{
    field: 'Country', title='Country', headerTemplate: "<u class='uom fa fa-info-circle fa-lg' data-container='body' title='' data-toggle='tooltip' data-original-title='<i class="fa fa-square" style="color:PaleGoldenRod"></i> Golden Standard'></u>"
}

In the DataBound event of a grid, am using below code to show tooltip.,
dataBound: function (e) {
        $("[data-toggle='tooltip']").tooltip();
}

Please see the attached screenshot for refrence.

Thanks in advance.

Hello, 

I am having a weird bug with the tooltip when using Firefox. The tooltip works correctly on Chrome and Safari, but with Firefox, the tooltip opens, closes, and reopens several times within a second and is stuck in an endless loop. I tried removing animations, changing the structure that invokes the tooltip, took out the onClick event and several other things, but nothing works. Firefox still has a bug on the tooltips. 
The tooltip on the bottom left side of the page works, but the tooltip on the bottom right is the problematic tooltip. Both tooltips shared the same code, but I broke the code into two sections and changed the logic, the tooltip on the left has the tooltip position on the left, whereas the tooltip on the right has the tooltip position to show on the left. I had thought that this may be the problem as the position was not right, but that did not solve the issue either. 

When debugging, I am seeing a k-animation container go from various classes. When the tooltip is shown, I see a tt_active class with display block, and when hidden, no class but display none. I have attached the files. 

The bug can be reproduced by clicking on the map marker image at the bottom right of the page for every scene. The tooltip that works is on the bottom left. The URL is gregoryalexander.com/indexNew.cfm. The bug only exists when using firefox. Chrome works. 

On another note, I wanted the tooltip (that is working) on the left to be colored blue, and the tooltip to the right (that is broken) to be colored green. These are the two colors of my logo at the top of the page. I tried to use the ID of the element and the k-tooltip class like so, but it did not work. I tried many other options, and can't seem to get the tooltips to use different colors without breaking the tooltip. How can I prefix the class or element when I style the .k-tooltip class like so?

#aboutThisImage .k-tooltip {
background: #698A50 !important;   
width: var(--toolTipWidth);
height: var(--toolTipHeight);/*<cfif session.isMobile>175<cfelse>215</cfif>px;*/
font-size: var(--toolTipFontSize);
border-radius: 10px;
/* Subtle drop shadow on the main layer */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Hello,

I encountered strange behaviour of kendo ui tooltip in Chrome.

Steps to reproduce:

1. use Chrome (version 73.0.3683.103)  to go to tooltip demo https://demos.telerik.com/kendo-ui/tooltip/index
2. set focus to document (click on page)
3. move mouse pointer pixel by pixel to upper/center border of any of the yellow dots (that are showing tooltip)

=> if you hit the border tooltip starts appearing and disappering forever

Regards

Dirk

Hi,

I'm using a kendoTooltip control with the content.url configuration.

The problem is it takes a second or so to load the content, which is a long time when you're hovering over something frequently.

I'd like to know if it's possible to programatically load the content in the background (say, a few seconds after the page loads). Then when the user hovers over the target control, the tooltip can display instantly (having already loaded the content).

Thanks,

George

I can't find solution for this bug after update from 2017 to 2018 Kendo UI.

Everything is on the screenshot.

Thanks in advance

     Hi,

I'm using Kendo DataSource with templates.But also I've to using Kendo.Tooltip with this Itemtemplate.

I'm wondering if i have any chance to get data without givin a div or any html tag as a data attirbutes from my ItemTemplate to myTooltip template?

Normally you can set data tag with any html tag like this

<div class="col1" data-HistoryType="#:HistoryType#"></div>

and reach data in tooltip like #=target.data('HistoryType')# 

But my problem is a have many data to need to pass tooltip like that.

Here is my code example,