title: Show Row Details as a Popup/ToopTip form on Mouse Hover for each row in KendoUI Grid
body: <p>I have a grid populated with data and 
  i want to show only 3 or 2 columns and hide rest of columns cause the grid goes very wide.
  when the mouse is hovered over a row i want to show all the columns of that row as as popup /tooltip form.</p>
  
  <p>Please help me with this. I searched a lot and only found out Editable popup and with button click not with hover.</p>
  
  <pre><code>function PopulateGrid() {
      $("#recentNews").kendoGrid({
  
          columns: [
              { field:      'Date', title: 'Date', width: 80,
                  template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
              },
              { field:      'TradeTime', title: 'Time', width: 60,
                  template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
              },
  
              { field: 'Title', title: 'Description', width: 200 },
              { field: 'Country', title: 'Country', width: 40 },
              { field: 'Economy', title: 'Economoy', width: 40 }
  
          ],
  
          dataSource: {
              transport: {
                  read: {
                      url:      'Home/GetNews',
                      dataType: "json",
                      type:     "POST"
                  }
              },
              schema:    {
                  data:  function (data) {
                      return data.data;
                  },
                  total: function (data) {
                      return data.total;
                  }
              },
              pageSize:  100
  
          },
          //            change: onChange,
          //          dataBound: onDataBound,
          dataBound:  HoverOnGrid,
          pageable:   true,
          sortable:   true,
          scrollable: true,
          height:     565,
          width:      2000
      });
  }
  </code></pre>