iahu/hoverHint.css

## hoverHint.css
.hint {position:absolute;font:12px arial, 宋体;background:#2d2d2d;color:#f2f2f2;padding:6px 9px;border:1px solid #000;z-index: 999;margin-top:0.5em;}
.hint-content {position: relative;z-index: 1000;}
.hint i, .hint em {position: absolute;display: block;height: 0;width: 0;background: transparent;border: 6px solid transparent;z-index: 100;border-bottom-color: #000;top: -1em;left: 50%;margin-left: -0.5em;}
.hint i {border-bottom-color: #2d2d2d;z-index: 101;margin-top: 1px;}

## hoverHint.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hoverHint-test</title>
	<link rel="stylesheet" href="./hoverHint.css">
</head>
<body>
	<a href="#" data-hint="测试1" id="test1">测试</a>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br><p id="test2" data-hint="测试2">测试2</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="test3" data-hint="测试3">测试3</span>

	<script src="./hoverHint.js"></script>

	<script>
function $(id) {
	return document.getElementById(id);
}

HoverHint( $('test1') );
HoverHint( $('test2') );
HoverHint( $('test3') );

	</script>
</body>
</html>

## hoverHint.js
var HoverHint = (function() {
	'use strict';
	function _getBodyScroll () {
		return {
			top: document.documentElement.scrollTop || document.body.scrollTop,
			left: document.documentElement.scrollLeft || document.body.scrollLeft
		};
	}
	/**
	 * 悬停提示
	 * @param {Element} el        目标元素
	 * @param {str} className     提示自定义的元素的className
	 */
	function HoverHint(el, className) {
		// enforces new
		if (!(this instanceof HoverHint)) {
			return new HoverHint(el, className);
		}
		var _self = this;
		if (el.jquery) {
			for (var i = el.length - 1; i >= 0; i--) {
				new HoverHint( el[i], className );
			}
		} else {
			this.el = el;
		}
		this.content = this.el.getAttribute('data-hint');
		this.className = className || '';

		if (el.addEventListener) {
			el.addEventListener('mouseover', function () {
				_self.createUI.call(_self);
			}, false);
			el.addEventListener('mouseout', function () {
				_self.remove.call(_self);
			}, false);
		} else if (el.attachEvent) {
			el.attachEvent('onmouseover', function () {
				_self.createUI.call(_self);
			});
			el.attachEvent('onmouseout', function () {
				_self.remove.call(_self);
			});
		}
	}

	HoverHint.prototype.createUI = function() {
		var createElement = function (name) {
			return document.createElement(name);
		},
		size = this.el.getBoundingClientRect(),
		left = _getBodyScroll().left + size.left,
		height = Math.max(this.el.clientHeight || this.el.offsetHeight),
		top = height + _getBodyScroll().top + size.top,
		oHint = createElement('div'),
		oAfter = createElement('i'),
		oBefore = createElement('em'),
		oContent = createElement('div'),

		className = this.className;

		oHint.className = 'hint ' + className;
		oContent.className = 'hint-content';
		oContent.innerHTML = this.content;
		oHint.appendChild(oAfter);
		oHint.appendChild(oBefore);
		oHint.appendChild(oContent);

		document.body.appendChild(oHint);
		oHint.style.left = left + 'px';
		oHint.style.top = top + 3 + 'px';

		this.hintEl = oHint;
	};

	HoverHint.prototype.remove = function() {
		this.hintEl.parentNode.removeChild(this.hintEl);
	};

	return HoverHint;
}());
	.hint {position:absolute;font:12px arial, 宋体;background:#2d2d2d;color:#f2f2f2;padding:6px 9px;border:1px solid #000;z-index: 999;margin-top:0.5em;}
	.hint-content {position: relative;z-index: 1000;}
	.hint i, .hint em {position: absolute;display: block;height: 0;width: 0;background: transparent;border: 6px solid transparent;z-index: 100;border-bottom-color: #000;top: -1em;left: 50%;margin-left: -0.5em;}
	.hint i {border-bottom-color: #2d2d2d;z-index: 101;margin-top: 1px;}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>hoverHint-test</title>
	<link rel="stylesheet" href="./hoverHint.css">
	</head>
	<body>
	<a href="#" data-hint="测试1" id="test1">测试</a>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br><p id="test2" data-hint="测试2">测试2</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>     <span id="test3" data-hint="测试3">测试3</span>

	<script src="./hoverHint.js"></script>

	<script>
	function $(id) {
	return document.getElementById(id);
	}

	HoverHint( $('test1') );
	HoverHint( $('test2') );
	HoverHint( $('test3') );

	</script>
	</body>
	</html>
	var HoverHint = (function() {
	'use strict';
	function _getBodyScroll () {
	return {
	top: document.documentElement.scrollTop \|\| document.body.scrollTop,
	left: document.documentElement.scrollLeft \|\| document.body.scrollLeft
	};
	}
	/**
	* 悬停提示
	* @param {Element} el 目标元素
	* @param {str} className 提示自定义的元素的className
	*/
	function HoverHint(el, className) {
	// enforces new
	if (!(this instanceof HoverHint)) {
	return new HoverHint(el, className);
	}
	var _self = this;
	if (el.jquery) {
	for (var i = el.length - 1; i >= 0; i--) {
	new HoverHint( el[i], className );
	}
	} else {
	this.el = el;
	}
	this.content = this.el.getAttribute('data-hint');
	this.className = className \|\| '';

	if (el.addEventListener) {
	el.addEventListener('mouseover', function () {
	_self.createUI.call(_self);
	}, false);
	el.addEventListener('mouseout', function () {
	_self.remove.call(_self);
	}, false);
	} else if (el.attachEvent) {
	el.attachEvent('onmouseover', function () {
	_self.createUI.call(_self);
	});
	el.attachEvent('onmouseout', function () {
	_self.remove.call(_self);
	});
	}
	}

	HoverHint.prototype.createUI = function() {
	var createElement = function (name) {
	return document.createElement(name);
	},
	size = this.el.getBoundingClientRect(),
	left = _getBodyScroll().left + size.left,
	height = Math.max(this.el.clientHeight \|\| this.el.offsetHeight),
	top = height + _getBodyScroll().top + size.top,
	oHint = createElement('div'),
	oAfter = createElement('i'),
	oBefore = createElement('em'),
	oContent = createElement('div'),

	className = this.className;

	oHint.className = 'hint ' + className;
	oContent.className = 'hint-content';
	oContent.innerHTML = this.content;
	oHint.appendChild(oAfter);
	oHint.appendChild(oBefore);
	oHint.appendChild(oContent);

	document.body.appendChild(oHint);
	oHint.style.left = left + 'px';
	oHint.style.top = top + 3 + 'px';

	this.hintEl = oHint;
	};

	HoverHint.prototype.remove = function() {
	this.hintEl.parentNode.removeChild(this.hintEl);
	};

	return HoverHint;
	}());