Adding Cell ToolTips in SpreadJS

Adding Tooltips to Spreadsheets is a common usage where you want to show additional information about cells. SpreadJS allows you to display the tooltip only for the HyperlinkCellType. However, you may want to show cell tooltips for any type of cell, say for instance to display the current cell location in a tooltip.

SpreadJS provides simple solution for this. Here in this blog lets discuss two different yet simple approaches that will help you to create and display tooltips for all the cells in SpreadJS.

Using a CustomCellType

The first approach is to use a CustomCelltype. For the demonstration purpose, lets name this customcelltype as TipCellType which will display tooltips for the cells.

$(function ()
{
  function TipCellType()
  {
  }
  TipCellType.prototype = new $.wijmo.wijspread.TextCellType();
  TipCellType.prototype.getHitInfo = function (x, y, row, col, cellStyle, cellRect, sheetArea) {
     return { x: x, y: y, row: row, col: col, cellStyle: cellStyle, cellRect: cellRect, sheetArea: sheetArea };
  }
  TipCellType.prototype.processMouseEnter = function (hitinfo){
    if (!this._toolTipElement) {
        var div = document.createElement("div");
        $(div).css("position", "absolute")
          .css("border", "1px #C0C0C0 solid")
          .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
          .css("font", "9pt Arial")
          .css("background", "white")
          .css("padding", 5);
          this._toolTipElement = div;
        }
     $(this._toolTipElement).text("Cell [R:" + hitinfo.row + "] : [C:" + hitinfo.col + "]")
        .css("top", hitinfo.y + 15)
        .css("left", hitinfo.x + 15);
         $(this._toolTipElement).hide();
        document.body.insertBefore(this._toolTipElement, null);
        $(this._toolTipElement).show("fast");
 };
 TipCellType.prototype.processMouseLeave = function (hitinfo) {
    if (this._toolTipElement) {
        document.body.removeChild(this._toolTipElement);
        this._toolTipElement = null;
     }
 };

 $("#ss").wijspread();
 var spread = $("#ss").wijspread("spread");
 var sheet = spread.getActiveSheet();
 spread.useWijmoTheme = true;
 spread.repaint();
 sheet.getDefaultStyle().cellType = new TipCellType();

 var dataValidator = new $.wijmo.wijspread.DefaultDataValidator();
 dataValidator.type = $.wijmo.wijspread.CriteriaType.AnyValue;
 dataValidator.showInputMessage = true;
 dataValidator.inputTitle = "test";
 dataValidator.inputMessage = "Here is a tip."
 sheet.getCell(2, 2).value("click here").dataValidator(dataValidator);
});

Monitor the DOM Mouse events

The second approach is useful where you would want to show dynamic tooltips on mouse hover. This can be done simply by using DOM Mouse events to display tooltips. Here is the code:

$(function ()
{
  $("#ss").wijspread();
  var spread = $("#ss").wijspread("spread");
  var sheet = spread.getActiveSheet();
  $("#ss").mouseenter(function () {
     if (!_toolTipElement) {
         _toolTipElement = createTipElement();
         document.body.insertBefore(_toolTipElement, null);
         $(_toolTipElement).hide();
      }
  });
 $("#ss").mouseleave(function () {
      console.log("leave");
      document.body.removeChild(_toolTipElement);
       _toolTipElement = null;
});

$("#ss").mousemove(function (event) {
   var leftOffset = event.pageX;
   var topOffset = event.pageY;
   var hitInfo = sheet.hitTest(leftOffset - $("#ss").offset().left, topOffset - $("#ss").offset().top);
   if (hitInfo) {
      if (hitInfo.hitTestType === $.wijmo.wijspread.SheetArea.viewport
           && !hitInfo.dragInfo
           && hitInfo.row != undefined
           && hitInfo.col != undefined) {
                var newCell = sheet.getCell(hitInfo.row, hitInfo.col);
                if (!oldCell) {
                  oldCell = newCell;
                }
                if (oldCell.row != newCell.row || oldCell.col != newCell.col) {
                   $(_toolTipElement).hide();
                   oldCell = newCell;
                   var cellRect = sheet.getCellRect(oldCell.row, oldCell.col);
                   $(_toolTipElement).text("Cell [R:" + oldCell.row + "] : [C:" + oldCell.col + "]")
                         .css("top", hitInfo.y + 15)
                         .css("left", hitInfo.x + 15).show("fast");
                  }
           return;
       }
    }
    oldCell = null;
    $(_toolTipElement).hide();
 });
});

Please Note: This approach does not work for IE10

Conclusion

With both the approaches, you can generate a Spreadsheet as the image shows here

Download the source code of the sample for complete implementation.