Grid header Tooltips

1 Answer 3372 Views
ToolTip
Arman
Top achievements
Rank 1
Arman asked on 28 Mar 2013, 11:51 PM
Can you post an example of attaching the new tooltip to grid column headers? tx!

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 29 Mar 2013, 08:54 AM
Hi Arman,

Please check this jsBin example which I prepared for you - it demonstrates a possible implementation of the desired functionality.

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Ephrem
Top achievements
Rank 1
commented on 08 Apr 2013, 10:52 PM

I want add custom toolTip text to kendo Grid coulmn header. right now I
can only have a toolTip text which is the title of the column as explained
above.

Can you please help me achieve that?
Iliana Nikolova
Telerik team
commented on 09 Apr 2013, 08:19 AM

Hi Ephrem,

In order to achieve this you should specify the text via the tooltip widget's content configuration option. For example: 
grid.thead.kendoTooltip({
   //....
   filter: "th",
   content: "Custom Text"
});

Kind regards,

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Ephrem
Top achievements
Rank 1
commented on 09 Apr 2013, 04:53 PM

Hi Iliana,

Thanks you for your reply. the exact thing I want to achieve was to have a different and custom text for every column in a grid. So if I have  Id and Name columns in a grid I wanted to have custom tooltip text for both.

Thanks,
Ephrem
Iliana Nikolova
Telerik team
commented on 11 Apr 2013, 12:43 PM

Hello Ephrem,

In order to achieve this you should implement your custom logic in the content function. For example:

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
       var target = e.target;
       if($(target).index() == 1) {
           return ("SomeTooltipText")
       }
       else {return ("AnotherTooltipText")}
    }
})
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
DHHS
Top achievements
Rank 1
commented on 06 Oct 2015, 08:02 PM

Hi Iliana,

 

I am trying to use kendo tool tip on my grid headers. It is working fine, but I am getting white space on the background of the header when i mouse over on the header. I am sure i might be missing something. Can you please tell me if I am missing anything.

 

All I am doing is this . I have attached a screen shot of my grid when mouse over on the header.

    $(document).ready(function () {
        var grid = $("#contractGrid").data("kendoGrid");
        grid.thead.kendoTooltip({
            filter: "th",
            content: function (e) {
                var target = e.target; // the element for which the tooltip is shown
                return target.text(); // set the element text as content of the tooltip
            }
        });
});

 

 

Plamen Lazarov
Telerik team
commented on 08 Oct 2015, 03:29 PM

Hi DHHS,

Based on the provided screenshot, I assume that the Bootstrap theme is applied to the Grid. If so, please use the following CSS rule to override the white background: 

.k-grid-header .k-state-active {
  background: #f5f5f5;
}

 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
DHHS
Top achievements
Rank 1
commented on 08 Oct 2015, 07:59 PM

Perfect. Thank you. 

  I have custom commands in my last column, so the text is null but still the tooltip is showing. Is there a way that i can hide the tooltip if the text is null . I have tried something like this  but didn't work :(

var grid = $("#contractGrid").data("kendoGrid");
  var tooltip = grid.thead.kendoTooltip({
       filter: "th",
       content: function (e) {
           var target = e.target; // element for which the tooltip is shown    
           alert($(target).text());
           if ($(target).text() == null) {                   
               tooltip.hide();
           }
           return $(target).text();
            
       },
       width :120
   });

 

 

and one more thing. I have custom command buttons with very big names, so ​I want to give something small text on the button text and when I mouse over i want to see the full text on it. Below are my custom command buttons. 

columns.Command(command =>
             {
                 command.Custom("Budget").SendDataKeys(true).Click("budgetClick").Text("B").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" });
                 command.Custom("RevenueSource").SendDataKeys(true).Click("revenueSourceClick").Text("RS").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-edit k-primary" });
                 command.Custom("ServiceDetails").Text("BC").SendDataKeys(true).Click("ServiceChilClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-delete k-primary" });
                 command.Custom("Procedure").Text("PC").SendDataKeys(true).Click("ProcedureClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-view k-primary" });
             })

Plamen Lazarov
Telerik team
commented on 12 Oct 2015, 03:40 PM

Hello DHHS,

In order to show the Tooltip based on a condition I suggest you checking the following how-to article: 

http://docs.telerik.com/kendo-ui/web/tooltip/how-to/show-on-length-condition#show-only-if-text-exceeds-certain-length.

Concerning your second question, changing the text of a custom command button on the fly is not supported out-of-the-box and requires custom implementation. A possible approach would be setting a title of the button which will be displayed on mouse over.

I hope this helps. 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
DHHS
Top achievements
Rank 1
commented on 13 Oct 2015, 03:08 PM

Sure the title of the button works too. But custom command doesnt have title option :(

 

How to filter in kendo tool tip for custom command? Like for grid header we are filtering for th, what should i filter for custom command

 

 

Thanks,

Veena

DHHS
Top achievements
Rank 1
commented on 13 Oct 2015, 03:08 PM

Sure the title of the button works too. But custom command doesnt have title option 

 

How to filter in kendo tool tip for custom command? Like for grid header we are filtering for th, what should i filter for custom command

 

 

Thanks,

Veena

Plamen Lazarov
Telerik team
commented on 15 Oct 2015, 02:43 PM

Hello DHHS,

You can add the title attribute in the same way as you have added the CSS classes. For instance: 

command.Custom("Budget").Text("B").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary", title="Long text here" });

 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
DHHS
Top achievements
Rank 1
commented on 15 Oct 2015, 02:59 PM

Thank you.

 

what is the filter i have to add for custom command button for kendo tool tip

var grid = $("#contractGrid").data("kendoGrid");
  var tooltip = grid.thead.kendoTooltip({
       filter: "th", // here what should i give for custom command button
       content: function (e) {
           var target = e.target;
           alert($(target).text());
           if ($(target).text() == null) {                  
               tooltip.hide();
           }
           return $(target).text();
 
       },
       width :120
   });​

Plamen Lazarov
Telerik team
commented on 19 Oct 2015, 01:50 PM

Hello DHHS,

In order to show tooltips over custom command buttons, you should initialize the Tooltip widget from an HTML element, which is an ancestor of the data table. thead is an ancestor of the Grid header area, while tbody is an ancestor of the data area.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-tbody

Also, change the Tooltip filter to ".k-button". However, this will affect all buttons inside the Grid's data rows. If this is not desired, please add a custom class via HtmlAttributes, and use it as a Tooltip filter. 


$(function () {
  var grid = $("#grid").data("kendoGrid");
  var tooltip = grid.tbody.kendoTooltip({
    filter: ".k-button",
    content: function (e) {
       var target = e.target; // element for which the tooltip is shown
       if ($(target).text() == null) {
         tooltip.hide();
       }
       return $(target).text();
 
    },
    width: 120
  });
});

 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
DHHS
Top achievements
Rank 1
commented on 19 Oct 2015, 04:32 PM

Thank You :)
Tony
Top achievements
Rank 1
commented on 30 Sep 2020, 04:06 PM

Hey Plamen! I appreciate all your help in the forum, I was wondering if you could provide an example in asp.net core for the tooltip to grab the title of the column. Thank you
Petar
Telerik team
commented on 02 Oct 2020, 02:24 PM

Hi Tony,

Attached to my reply, you will find a runnable example demonstrating how we can add a ToolTip to the Grid component in the context of the UI for ASP.NET Core. 

To implement the targeted functionality of displaying a given column's name in the ToopTip, the following code is used.

<script id="template" type="text/x-kendo-template">
    <div class="template-wrapper">
        <p>#=$($(".k-grid-header > tr > th")[target.context.cellIndex]).text()#</p>
    </div>
</script>

I hope the example and the above description will help you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
ToolTip
Asked by
Arman
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or