Telerik Forums
Kendo UI for jQuery Forum
5 answers
695 views
Recently upgraded from kendo 2016 to 2020, I no longer able to see the class k-invalid-msg in content/kendo. If its removed in latest kendo what is the alternate?
Stoyan
Telerik team
 answered on 09 Dec 2020
5 answers
70 views

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.

 

Stoyan
Telerik team
 answered on 11 Nov 2020
5 answers
1.9K+ views

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?

Ivan Danchev
Telerik team
 answered on 10 Nov 2020
1 answer
3.7K+ views
Can you post an example of attaching the new tooltip to grid column headers? tx!
Petar
Telerik team
 answered on 02 Oct 2020
1 answer
415 views

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;

        }

Martin
Telerik team
 answered on 24 Sep 2020
1 answer
659 views

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");

 

Martin
Telerik team
 answered on 01 Jul 2020
2 answers
4.4K+ views
I have a kendo grid contains a list of people.  I would like to add a kendo tooltip to each row so that, in essence, a detail view for the selected row will be shown in the tooltip.  To do this I need to call a web service method when the tooltip is loaded, passing in the key value of the row, then I use a template to layout the content of tooltip.  I'm a bit stuck trying to figure out where to pass the key value of the row to the tooltip...  I'm doing this in pure javascript, so no server-side code is used at all.  The web service call to get the details must be a POST, not a GET, if that makes any difference...?

Here's what I have, which isn't even close to working (the grid populates fine, but the tooltips aren't working):

$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
});

Can anyone point me to an example where something like this is being done?

Thanks!
Eddie
Misho
Telerik team
 answered on 01 Jul 2020
1 answer
65 views

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

Petar
Telerik team
 answered on 26 May 2020
4 answers
1.2K+ views

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.

Dimitar
Telerik team
 answered on 30 Apr 2020
5 answers
1.0K+ views

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 !

 

Misho
Telerik team
 answered on 14 Apr 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?