Tooltip does not hide with empty value

2 posts, 0 answers
  1. Shahar
    Shahar avatar
    12 posts
    Member since:
    Jul 2010

    Posted 24 Jun 2013 Link to this post

    I'm having problems hiding the tooltip in web grid when thet value of the cell is null/empty string.
    I used templates to add the content.
    I'm using mvc razor.
    here is the example code :
            chtml file:
            //.Events(events => events.Show("TooltipOnShow"))

    <script type="text/x-kendo-template" id="gridtooltipTemplate">   
         <div id="ErrorReportGridTooltip" class="TooltipStyle">

    Css file:
       .TooltipStyle {
           font-family:Arial, Helvetica, sans-serif;
           max-width: 250px;

    I'm finding it hard to remove the tooltip whne getting empty valuse.
    I tried to set a differnt css class for my tooltip ErrorReportGridTooltip div but the frame(border and background) do not disappear.
    Any ideas will be much appriciated
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 24 Jun 2013 Link to this post

    Hello Shachar,

    For this kind of functionality I would suggest you two different approaches:

    1. Use the :empty selector to create a "whitelist" for which cells the Tooltip box will be displayed. You can use something like this .Filter("td:not(:empty))". However please keep in mind that this is a CSS3 selector and it is only supported in IE9+, Firefox 3+, Safari 3.1+, Chrome 2.0+, Opera 9.5+ etc.
    2. Another approach is to implement a functionality that will check whether the cell in the grid is empty and if its not empty to add a custom class to it. After that you will be able to use .Filter(".notEmpty"), so again you can filter the cells for which the Tooltip won't be displayed.
    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top