ToolTip 实现全介绍| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

ToolTip 实现全介绍

## ToolTip 实现全介绍
### ToolTip 是什么？
ToolTip , 常翻译为提示框， 页面的效果是鼠标移到到某个页面元素时，弹出一个对话框显示。 实现的效果如下：
![](/upload/picture/2022-09-27/upload_207eee008c07e88b498eb8f10d4e62c8.png)
在Ext JS的应用中，ToolTip 一般使用在：
Button按钮： 用更多的文字解释该按钮的功能。
Grid 中的某列： 该列的内容较多，无法在页面中完全显示的时候， 会截断， 多余部分使用 … 替代， 弹出一个提示框完整显示该Cell包含的内容。
### ToolTip 的原生实现
其实ToolTip 使用原生的HTML + CSS 既可以实现，实现步骤如下：
定义 ToolTip 相关的页面元素
```
鼠标移动到这里显示Tooltip  提示文本
```

这里定义了一个div, 内嵌了一个 span ， span 就是用来显示 ToolTip 的。 这两个元素分别指定的样式是 tooltip 和 tooltiptext
2. 定义样式

```css
.tooltip {    
	position: relative;    
	display: inline-block;    
	border-bottom: 1px dotted black; 
}
.tooltip .tooltiptext {    
	visibility: hidden;    
	width: 120px;    
	background-color: black;    
	color: #fff;    
	text-align: center;    
	padding: 5px 0;    
	border-radius: 6px;     /* 定位 */    
	position: absolute;    
	z-index: 1;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}
```

tooltip 定义tooltip 整体样式
.tooltip .tooltiptext 提示框的样式， 默认隐藏
.tooltip:hover .tooltiptext ： 鼠标移动到该区块时， 显示提示框的元素
显示效果
以上显示的效果如下：
![](/upload/picture/2022-09-27/upload_8297cf9c11516321c55094c95e3d9d5a.png)
在线演示地址： http://jsrun.net/273Kp/edit
### Ext JS的 ToolTip
两种类型的Tip
1.自行创建的Tip对象 , 创建Ext.tip.Tip 和 Ext.tip.ToolTip 的类实例
2.快速Tip， QuickTip， 使用页面元素或者是组件的属性直接定义
### 1. Ext.tip.ToolTip 使用示例
Ext.tip.ToolTip 可以使用在一般HTML 元素上， 也可以使用在Ext JS组件上。举例来说：
使用在HTML 元素上
比如页面中有一个id 是 div1 的元素
```html
Div 区块
```

使用Ext JS增加ToolTip 的代码如下：
			var tip = Ext.create('Ext.tip.ToolTip', {				target: 'div1',				html: '使用Ext.tip.ToolTip 定义的'			});

使用在Grid中
```javascript
var grid = Ext.create('Ext.grid.Panel', {
	store: [{
		id: '1',
		name: '刘备'
	}, {
		id: '2',
		name: '关羽'
	}, {
		id: '3',
		name: '张飞'
	}],
	columns: [
		{ text: '编号', width: 75, dataIndex: 'id' },
		{ text: '名字', flex: 1, dataIndex: 'name' }
	],
		height: 200,
		width: 400,
		renderTo: 'div3'
	});
	var view = grid.getView();
	var tip = Ext.create('Ext.tip.ToolTip', {
		target: view.el, //Grid对应视图的页面元素
		delegate: view.itemSelector, //根据每行显示
		trackMouse: true,
		renderTo: Ext.getBody(),
		listeners: {
		beforeshow: function updateTipBody(tip) { //根据鼠标移动的行显示该行的Tip
		tip.update('你正在看 "' + view.getRecord(tip.triggerElement).get('name') +
		'"');
	}
	}
});
```

创建Ext.tip.ToolTip 根据每行进行显示。
### 2. 快速Tip 显示
以上提示框需要创建Tip相关的类， 但是类似按钮等组件， 如果每个按钮都去创建一个Tip 对象，势必很麻烦，也比较耗费资源， 于是Ext JS提供了一个提示框的单例类Ext.tip.QuickTip ， 并且可以通过Ext.tip.QuickTipManager 这个单例管理器进行管理。
以按钮为例， 实现步骤如下：
初始化QuickTip 的单例对象（必须， 不然没有效果）
```
Ext.tip.QuickTipManager.init();
```
1
通过 tooltip 属性直接定义提示框内容：
 ```json
 {
  text: '带ToolTip的按钮',
  tooltip: '这是ToolTip'
  }
```

相比以上方式， 是不是简便很多。
此外， 如果是基于Cmd 的Ext JS的应用，可以在 Application.js 中直接通过quickTips: true, 的属性开启QuickTip 的初始化。配置代码类似：
![](/upload/picture/2022-09-27/upload_929806390853fc881b36175f0147679d.png)
ToolTip 对应的类
ToolTip 相关的类
Ext.tip.Tip
– Ext.tip.ToolTip
— Ext.tip.QuickTip
QuickTip 管理的单例类
Ext.tip.QuickTipManager
### 示例源码
https://github.com/osxm/extjs_dev_ency/blob/main/demos/chp07/tooltip.html

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

ToolTip 实现全介绍

网站导航