SpreadJS自定义单元格系列-Tip单元格

SpreadJS Tip单元格，当鼠标移动到单元格，显示出一个小提示。

要实现鼠标移动到单元格上时显示出提示看，只需要重写TextCellType的processMouseEnter方法，在方法中创建一个Tip即可。同时在processMouseLeave方法中销毁Tip。

function TipCellType() {
    
}
TipCellType.prototype = new GcSpread.Sheets.TextCellType();
TipCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
    return {
        x: x,
        y: y,
        row: context.row,
        col: context.col,
        cellStyle: cellStyle,
        cellRect: cellRect,
        sheetArea: context.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;
    }
};

RunJS演示地址：http://runjs.cn/detail/uzfkszof

更多资源

SpreadJS中文学习指南：http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档：http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣，可以到官方网站下载试用：/developer/spreadjs

如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn