Ext.js实现ToolTip提示

最新推荐文章于 2024-07-29 17:49:33 发布

luozde

最新推荐文章于 2024-07-29 17:49:33 发布

阅读量1k

点赞数

分类专栏：前端文章标签： extjs javascript tooltip

本文链接：https://blog.youkuaiyun.com/luozde/article/details/106674598

版权

前端专栏收录该内容

3 篇文章

订阅专栏

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");
			}
		}
	}
}