Hi team,
<Tooltip bad positioned when autohide:false>
See your own demo for an example.
I will appreciate a workaround.
Also, sorry but the new style of the callout is ugly and lack visibility.
That said, thank you for the great job done with kendo ui.
Laurent.
Hello,
sorry if this has been asked before, I tried searching the
forum but didn’t quite find the same problem I have..
So I made a table with KendoGrid and in the first column of the table I have icons for active
incident tickets and service requests. I want to use the KendoTooltip on the
icons inside the table cell.
I tried out this code snippet from here:
$("#grid").kendoTooltip({
filter: "td:nth-child(1)",
position: "right",
content: function(e){
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem.Text;
return content;
}
}).data("kendoTooltip");
But the tooltip is applied to the whole cell, while I want to
use it on the individual icons inside the cell. I tried putting the icons
inside a new <div> in the template of the columns, like this (very
simplified):
var column = {
field: "IsAboutConfigItems",
title: "Incidents/Service
Requests ",
template: function (dataItem) {
var
result = "<div id=\“container\“> … <img>…</img> …</div>“;
return
result;
}
};
And the tooltip:
$("#container").kendoTooltip({
content: function (e) {
var result = "test"
;
//etc...
return result;
}
});
But it doesn’t work, there is no tooltip showing up at all but also no errors in DevTools. I’m not sure what I’m doing wrong?
Hi,
When I'm customizing the kendo tooltip with a custom class, setting the custom class to be added in the show event, the position of the toolbar is not correctly loaded when I'm setting a padding in this class. This happens only the first time showing the toolbar.
Is this an known bug that I should know about? Is there a fix or workaround for this?
I'm using kendo-ui": "^2019.1.2"
script:
show: (e) => {e.sender.popup.element.addClass("myclass");},
sass:
.myclass {
padding: 10px;
}
Hello,
Like the title says i am trying to show tooltip only on rows that exist in my array. I have a kendo grid with a checkbox, whichever checkbox the user clicks on i am storing that row in my $ctr.selectedRows[];
The example i have below, the tooltip shows up on all rows when they go back to their selection grid. I am either missing something, doing this wrong, or both.
$("#grid").kendoTooltip({
show: function(e){
$ctr.selectedRows.forEach((element) => {
this.content.parent().css("visibility", "visible");
})
},
hide:function(e){
this.content.parent().css("visibility", "hidden");
},
filter: "td:nth-child(1)", //this filter selects the first column cells
position: "center",
content: function(e){
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = "Currently we have " + dataItem.UnitsInStock + " " + dataItem.ProductName +"in stock";
return content;
}
}).data("kendoTooltip");
$grid.kendoGrid({
dataSource: dsPeople,
scrollable: { virtual: true },
height: 600,
resizable: true,
selectable: "row",
pageable: true,
dataBound: function(e) {
$("#grid").find("tr").kendoTooltip({
content: People.GetPerson(e.data.Xref, 6012, '127.0.0.1', 'netname'),
width: 680,
height: 120,
position: "bottom",
});
},
columns: [
{ field: "FullName", title: "Name", groupable: false, resizable: true },
{ field: "StreetAddress", title: "Address", groupable: false, resizable: true },
{ field: "Sex", title: "S", groupable: true, resizable: false, width: 30 },
{ field: "Race", title: "R", groupable: true, resizable: false, width: 30 },
{ field: "Height", title: "Ht", groupable: false, resizable: false, width: 40 },
{ field: "Weight", title: "Wt", groupable: false, resizable: false, width: 40 },
{ field: "Age", groupable: true, resizable: false, width: 40 },
{ field: "DOB", groupable: false, resizable: false, format: "{0:MM/dd/yyyy}", width: 90 },
{ field: "Xref", title: "XREF", groupable: false, resizable: true, width: 70 }
],
mobile: true
});
https://dojo.telerik.com/izIzuWuc/4
Click the button under it, tooltip hides. Click the button in the tooltip, it does not hide.
What I need:
- AutoHide = TRUE - Need to hide on lost focus (it's false in this example)
- Hide when clicking an option inside the tooltip itself
Hi.
I'm having issues trying to display tooltips only for grid headers and cells that have ellipsis using the logic indicated here:
http://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-ellipsis
Here is an example:
http://dojo.telerik.com/OjUJI
The issues I'm experiencing:
1. When hovering over an element for the first time, an empty tooltip is displayed.
For example, hover over the OrderID column header right after clicking on the "Run" button. If you move the mouse out of the column header than back, no tooltip is displayed. I didn't expect an empty tooltip to be displayed for this element at all, even during the first mouse over.
2. Grid headers with ellipsis don't display a tooltip.
For example, hover over any of the last three columns.
I expected a tooltip to be displayed.
3. Not all grid cells with an ellipsis display a tooltip.
For example, hover over the cells with a "Ship Name" containing any of the following values:
a. Vins et alcools Cheva...
b. Victua... en stock
Thank you.
Hello,
I'm using the following custom code for tooltips:
01.
$(
'#'
+ tooltipContainerDivId).kendoTooltip({
02.
filter: filter,
03.
position:
'right'
,
04.
animation: {
05.
open: {
06.
effects:
'fade:in'
,
07.
duration: 200
08.
},
09.
close: {
10.
effects:
'fade:out'
,
11.
duration: 200
12.
}
13.
},
14.
// Show tooltip only if the text of the target overflows with ellipsis.
15.
show:
function
() {
16.
var
cWidth = computeElementWidth(
this
.content, tooltipWidthWorkaroundDivId);
17.
if
(
this
.content.text().trim() !==
''
) {
18.
$(
'[role="tooltip"]'
).css({
19.
width: cWidth + 10,
20.
visibility:
'visible'
21.
});
22.
}
23.
},
24.
hide:
function
() {
25.
$(
'[role="tooltip"]'
).css(
'visibility'
,
'hidden'
);
26.
},
27.
// Apply additional custom logic to display the text of the relevant element only.
28.
content:
function
content(e) {
29.
var
$element = $(e.target[0]);
30.
var
cWidth = computeElementWidth($element, tooltipWidthWorkaroundDivId);
31.
var
dataTooltipAttr = $element.attr(
'datatooltip'
);
32.
33.
if
(cWidth > $element.width() || dataTooltipAttr) {
34.
// Text was truncated, or we have a custom tooltip message.
35.
if
(dataTooltipAttr) {
36.
return
dataTooltipAttr;
37.
}
38.
39.
return
e.target.text();
40.
}
else
{
41.
return
''
;
42.
}
43.
}
44.
});
The main reason for this is to display tooltip only if the text would be too short to fit within a grid cell.
This is working fairly well, the only major problem that we have with this is that the little arrow indicator is sometimes not aligned properly. If I remove this custom code, the arrow is always correctly aligned. I assume that internally there is some code that positions the arrow based on the box that kendo builds, but since I resize this box, the arrow is then positioned incorrectly.
What would be the proper way to solve my problem ? Is there already a way to perform the behaviour that I want ? the thing is there are also some cases where we always want to display the tooltip because it contains extra information not displayed in the cell, so I think that either way we need custom code.
Is there a way to override the way the arrow position is computed ?
As we can see on both the attached screenshots, the arrow's position is in both cases not quite right, and it seems to depend on what element I hovered previously, if I hover the element above I get something, and if I hovered the element below I get something else when I come back to that element from the attached screenshot.
Thanks !