HTML悬浮提示

function txm1Function() {
	tip("txm1", "最大长度不得超过30", false);
}

function tip(id, msg, flag) {
	flag = typeof flag == 'undefined' ? true : flag;
	var html = '<span class="category-pop">'  
		'<s class="pop-l">＜</s>'  
		'<a href="javascript:void(0)">'   msg   '</a>'  
		'<s class="pop-r"></s>'  
		'</span>';
	var offset = $('#'   id).offset();
	if (flag) {
		$('#'   id).unbind('hover').hover(function () {
			$(this).after($(html).css({top: offset.top, left: offset.left   $(this).width() - 80}));
		}, function () {
			$('span.category-pop').remove();
		});
	} else {
		$('span.category-pop').remove();
		$('#'   id).after($(html).css({top: offset.top, left: offset.left   $('#'   id).width() - 80}));
	}
};

.category-pop {
	top: 8px;
	height: 21px;
	position: absolute;
	background-color: #FFF8D9;
	border: 1px solid #FEBE8F;
	margin-left: 95px;
}
.category-pop .pop-l {
	left: -9px;
	color: #FEBE8F;
	position: absolute;
	transform: rotate(-25deg);
	display: inline-block;
	z-index: -1;
}
.category-pop s {
	display: inline-block;
	position: absolute;
	top: 1px;
	width: 7px;
	height: 23px;
}
.category-pop a {
	font-weight: normal;
	font-size: 12px;
	color: #F60;
	width: auto;
	height: 21px;
	line-height: 21px;
	margin: 0;
	text-indent: 0;
	padding: 0 7px 1px;
	text-decoration: none;
}
.category-pop .pop-r {
	right: -1px;
}

这篇好文章是转载于：学新通技术网