JS實現滑鼠懸停顯示文字提示

1.1 版本

1.2 預期效果

滑鼠懸停在表格中指定的儲存格上，便會顯示設定好的文字，滑鼠離開該儲存格，文字消失。如下圖所示

1.3 實現思路

實現方法：使用 JS 程式碼新增載入結束事件，設定當滑鼠懸浮指定儲存格時，出現提示。

11.0.10 之前版本儲存格提示 JS API，請參見：設定儲存格提示API，11.0.10 之前API無法自訂內容的相關屬性。

11.0.10 及之後版本儲存格提示 JS API，請參見：

• 修改所有儲存格樣式參考：表格物件API

• 修改行列儲存格樣式參考：表格列欄物件API

• 修改某單一樣式參考：儲存格物件API

2.1 準備範本

建立範本，SQL語句為：SELECT * FROM 訂單，表格設計如下圖所示：

2.2 新增事件

1）11.0.10 之前版本，點選「範本>範本Web屬性>分頁預覽設定」，在事件設定中新增「載入結束」事件。如下圖所示：

JavaScript 程式碼如下：

_g().addEffect('showTooltip', {
    address: "A2",
    text: '訂單ID10001'
});

2）11.0.10 及之後版本，點選「範本>範本Web屬性>分頁預覽設定」，在事件設定中新增「載入結束」事件。如下圖所示：

JavaScript 程式碼如下：

_g().getCell(2,1).showToolTip({
	show: true, // 是否會出現彈窗
	content: { // 可選欄位，不指定即為顯示文字
		text: "訂單ID10001", // 文字
		header: "提示" // 標題
	},
	style: { // 可選欄位，不指定為預設樣式，支援css標準樣式的欄位
		fontWeight: true,
		fontFamily: '華文隸書',
		fontSize: 14
		//符合css規則
	}
});
显示代码

2.3 效果预览

保存模板，PC 端点击「分页预览」，鼠标悬浮 A2 单元格显示提示文字，效果如 1.2 节所示：

注：不支持移动端。

11.0.10 之前版本，点击下载模板：懸停儲存格顯示提示文字1.cpt

11.0.10 及之后版本，点击下载模板：懸停儲存格顯示提示文字2.cpt