qtip2

http://www.cnblogs.com/zhangliang0115/archive/2012/02/20/2359264.html

http://www.zzjie.com/ZJC/PM/wangyesheji/2012/0408/21481.html

<div id="params">
				   		<select id="pram" name="pram" multiple="multiple" onchange="levelChange();" style="width:80px;">
							<c:forEach var="i" items="${elemlist}">
								<option value="${i.code}">${i.cname}   </option>
							</c:forEach>
						</select>
					</div>

//要素提示
		var api = $('<div />').qtip(
			{
			  content: ' ',
			  position:{
				  my: 'left center',
			      at: 'right center'
			  },
			  style: {
				    classes: 'ui-tooltip-blue ui-tooltip-shadow ui-tooltip-rounded',
				    width:'auto'
				  },
			  show: {
			    event: false
			  }
		}).qtip("api");

		$("#params").delegate("button", "mouseover mouseout", function(e) {
		  var txt = $("#pram").find("option:selected").text();
		  var txtarr = txt.split("   ");
		  var txthtml = "<table>";
		  for(var i=0;i<txtarr.length;i++) {
			  txthtml = txthtml + "<tr><td><font style='color:rgb(44,126,176);line-height:15px;text-align:left'>" + txtarr[i] + "</td></tr>";
		  }
		  txthtml = txthtml + "</table>";
		  if(txtarr.length!=1) {
			  if (e.type == 'mouseover') {
			    api.set('position.target', $(this));
			    api.set('content.text',txthtml);
			    api.show();
			  } else{
			    api.hide();
			  }
		  }
		});