Ext.js實現ToolTip提示

1. 需求背景

在項目背景中，填表格時，需要對所填字段做出要點提示，要求在鼠標移入提示png圖標時彈出提示彈出層，任意點則關閉彈出層。

2. 實現效果

3. 代碼實現

{
	xtype: 'image',
	id: "generalCmdTip",
	src: "../../../../../../../aiots/static/img/icon/tip.png",
	colspan: 1,
	width: 18,
	margin: '0 10 0 10',
	listeners: {
		afterrender: function (c) {
			Ext.create('Ext.tip.ToolTip', {
				target: c.getEl(),
				autoHide: false, 
				html: "<font color='red'>通用指令使用說明：</font><br>" +
					"遵循JT701標準協議格式<b>(指令,參數1,參數2,...)</b>，如<br>" +
					"開啓不休眠模式：<b>(P54,1,1)</b><br>" +
					"關閉不休眠模式：<b>(P54,1,0)</b><br>"
			});
		},
		el: {
			click: function () {
				//window.open("../Desktop");
			}
		}
	}
}

4. 參考資料

參考資料：

藥到病除-Extjs6圖片控件功能擴展，增加tip和點擊事件
lipan-ExtJs4 筆記（7） Ext.tip.ToolTip 提示