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

5、 需要加qtip提示的代码片段(图片映射代码)

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="";
		  						for(var i=0;i"
		  										  +"";
		  						}
		  						content_text+="
审批时间:
"+content[i].end_time_Disp+"
审批意见:
"+content[i].comment_message+"
";
		                        api.set('content.text', content_text);
	  						}else{
		                        api.set('content.text', "
暂无审批记录
");
	  						}
	                    }, function(xhr, status, error) {
	                        api.set('content.text', status + ': ' + error);
	                    });
	  					return '正在加载...';
	  				}
	  			},
	  			position:{
	  				target: 'mouse',
	                adjust: { mouse: false }
	  			}
		    });
	    });
    });

7、实现的效果