[bes]

<style>
#tit {
	position: absolute;
	left: -999px;
	top: -999px;
	border: solid 1px orange;
	z-index: 100;
	width: 550px;
	height: 20px;
	background: lightgray;
	margin-top: 5px;
}
#list {
	white-space: nowrap;
}
#list li{
	display: inline-block;
	width: 200px;
	height: 200px;
	border: solid 2px green;
	margin: 10px;
}
</style>

<div id="tit"></div>

<ul id="list">
	<li>post 1
	<li>post 2
	<li>post 3
	<li>post 4
	<li>post 5
</ul>
  
<script>
window.onload = function () {
	var tit = document.getElementById('tit');
	var list = document.getElementById('list');
	var mas = [
	'text 1',
	'text 2',
	'text 3',
	'text 4',
	'text 5',
	];
	
	function index(elem) {
		var childs =  elem.parentNode.children;
		var len = childs.length;
		for (var i = 0; i < len; i++) {
			if (childs[i] == elem) {
				return i;
			} 
		}
		return -1;
	}
	
	list.onmouseover = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.parentNode == this) {
			var i = index(target);
			tit.innerHTML = mas[i];
			var coords = target.getBoundingClientRect();
			tit.style.top = coords.top + 'px';
			if (i < 2) {
				tit.style.left = coords.right + 'px';
			} else {
				tit.style.left = coords.right - 550 + 'px';
			}
		}
	}
	
	list.onmouseout = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
			tit.style.top = '-999px';
			tit.style.left = '-999px';
	}

}
</script>