jQuery提示插件 qTip简单使用

简介：

qtip是Jquery的一款提示插件，使用比较简单，在Activiti工作流的流程追溯页面使用到qtip插件。

使用步骤：

1、 下载qtip插件

http://qtip2.com/download

2、 下载的插件目录

3、 一般情况下，将jquery.qtip.min.CSS和jquery.qtip.min.js放入项目中使用即可

4、 在页面引入css和js

<link rel="stylesheet" href="${appName}/res/jquery.qtip.min.css"><script type="text/javascript" src="${appName}/res/jquery.qtip.min.js"></script>5、 需要加qtip提示的代码片段(图片映射代码)
<map id="imgHref" name="imgHref"><area id="usertask1" name="部门经理【审批】" type="userTask" shape="rect" coords="(97.0,167.0,233.0,222.0)" xposition="97.0px" yposition="167.0px" target="_blank" data-hasqtip="0" aria-describedby="qtip-0"><area id="exclusivegateway1" name="Exclusive Gateway" type="exclusiveGateway" shape="rect" coords="(144.0,249.0,184.0,289.0)" xposition="144.0px" yposition="249.0px" target="_blank"><area id="usertask2" name="人事【审批】" type="userTask" shape="rect" coords="(112.0,311.0,217.0,366.0)" xposition="112.0px" yposition="311.0px" target="_blank" data-hasqtip="1"><area id="exclusivegateway2" name="Exclusive Gateway" type="exclusiveGateway" shape="rect" coords="(144.0,391.0,184.0,431.0)" xposition="144.0px" yposition="391.0px" target="_blank"><area id="usertask3" name="经理联合【审批】" type="userTask" shape="rect" coords="(96.0,465.0,234.0,520.0)" xposition="96.0px" yposition="465.0px" target="_blank" data-hasqtip="2"><area id="parallelgateway1_start" name="Parallel Gateway" type="parallelGateway" shape="rect" coords="(142.0,655.0,182.0,695.0)" xposition="142.0px" yposition="655.0px" target="_blank"><area id="usertask5" name="人事【报备】" type="userTask" shape="rect" coords="(5.0,711.0,110.0,766.0)" xposition="5.0px" yposition="711.0px" target="_blank" data-hasqtip="3"><area id="usertask6" name="部门【报备】" type="userTask" shape="rect" coords="(214.0,711.0,319.0,766.0)" xposition="214.0px" yposition="711.0px" target="_blank" data-hasqtip="4"><area id="usertask7" name="销假" type="userTask" shape="rect" coords="(109.0,855.0,214.0,910.0)" xposition="109.0px" yposition="855.0px" target="_blank" data-hasqtip="5"><area id="exclusivegateway3" name="Exclusive Gateway" type="exclusiveGateway" shape="rect" coords="(144.0,575.0,184.0,615.0)" xposition="144.0px" yposition="575.0px" target="_blank"><area id="usertask8" name="提交申请" type="userTask" shape="rect" coords="(112.0,75.0,217.0,130.0)" xposition="112.0px" yposition="75.0px" target="_blank" data-hasqtip="6"><area id="parallelgateway1_end" name="Parallel Gateway" type="parallelGateway" shape="rect" coords="(144.0,775.0,184.0,815.0)" xposition="144.0px" yposition="775.0px" target="_blank"><area id="startevent1" name="Start" type="startEvent" shape="rect" coords="(147.0,5.0,182.0,40.0)" xposition="147.0px" yposition="5.0px" target="_blank"><area id="endevent1" name="End" type="endEvent" shape="rect" coords="(144.0,955.0,179.0,990.0)" xposition="144.0px" yposition="955.0px" target="_blank"></map>6、qtip在jquery内的使用
$(function(){	    $("area[type='userTask']").each(function (){	    	var nodeId=$(this).attr('id');	    	var PRocessInstanceId="${proc_inst_id_}";	    	$(this).qtip({	  			content:{	  				text:function (event,api){	  					$.Ajax({	  						url:'${appName}/workflow/workflowProcess/getActivityApprovalInfo.ajax',	  						data:{proc_inst_id_:processInstanceId,task_def_key_:nodeId}	  					})	  					.then(function(content) {	  						if(content.length>0){		  						var content_text="<table  border='1' width='260px;' height='50px;' style='text-align: center;font-size:12px;'>";		  						for(var i=0;i<content.length;i++){		  							content_text+="<tr><td width='115px;'>审批人:</td><td>"+content[i].assignee_+"</td></tr><tr><td>审批时间:</td><td>"+content[i].end_time_Disp+"</td></tr>"		  										  +"<tr><td>审批意见:</td><td>"+content[i].comment_message+"</td></tr>";		  						}		  						content_text+="</table>";		                        api.set('content.text', content_text);	  						}else{		                        api.set('content.text', "<div>暂无审批记录</div>");	  						}	                    }, function(xhr, status, error) {	                        api.set('content.text', status + ': ' + error);	                    });	  					return '正在加载...';	  				}	  			},	  			position:{	  				target: 'mouse',	                adjust: { mouse: false }	  			}		    });	    });    });7、实现的效果