How to create a tooltip for Grid column

4 posts, 0 answers
  1. Greg
    Greg avatar
    4 posts
    Member since:
    Dec 2013

    Posted 25 Jan 2014 Link to this post

    I have a grid with an image column to show if there is an error or not.  If this is an error, I would like to display a tooltip with a message when the user hovers over the image.  The message would be from c.ErrorMessage.

    Is there a sample on how to do this?  I searched and could not find one.

    @(Html.Kendo().Grid<GridLineItem>().Name("grid").Columns(columns =>
                  {
                        columns.Bound(c => c.ReportName).Title("Status").ClientTemplate(
                            "# if (HasError == true) { #" +
                                "<img src='" + Url.Content("Images/error.png") + "'/>" +
                            "# } else { #" +
                                  "<img src='" + Url.Content("Images/success.png") + "'/>" +
                            "# } #"
                        );
                                    )
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 29 Jan 2014 Link to this post

    Hi Greg,

    I would recommend checking this example, where similar behavior is demonstrated.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Francis
    Francis avatar
    20 posts
    Member since:
    Feb 2011

    Posted 20 Feb 2018 in reply to Alexander Popov Link to this post

    How could we not fire the ToolTip when we do an Add New in that column?
  4. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 22 Feb 2018 Link to this post

    Hello, Francis,

    I can suggest checking the following example demonstrating how to show and hide the tooltip based on a condition:

    https://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-length-condition

    Currently, we have an issue with the ToolTip being shown and hidden multiple times, but the approach shown in the demo in the supported one.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top