鼠标悬停提示

html=======================


<div id="div" class="demo">
    <ol class="list">
        <li><i></i><a href="#" data-title="铁路部门：火车票丢失需“先补买再退款”">铁路部门：火车票丢失需“先补买再退款”</a></li>
        <li><i></i><a href="#" data-title="新修订新疆宗教事务条例施行 禁止宣扬极端思想">新修订新疆宗教事务条例施行 禁止宣扬极端思想</a></li>
        <li><i></i><a href="#" data-title="长征火箭从天而降瞬间被拍下 民众围观(图)">长征火箭从天而降瞬间被拍下 民众围观(图)</a></li>
        <li><i></i><a href="#" data-title="呼格父母:今后不再上访 打算先给儿子买个好墓地">呼格父母:今后不再上访 打算先给儿子买个好墓地</a></li>
        <li><i></i><a id=‘box‘ href="#" data-title="中国驻印尼使馆:印尼未对持普通护照中方人员免签">中国驻印尼使馆:印尼未对持普通护照中方人员免签</a></li>
        <li><i></i><a href="#" data-title="陕西圈养大熊猫发生犬瘟热  一8岁大熊猫死亡">陕西圈养大熊猫发生犬瘟热  一8岁大熊猫死亡</a></li>
    </ol>
</div>


css============

.demo{width: 320px;height: 600px;position: relative;margin: 0 auto;}
li{position: relative;padding-top: 20px;font-size: 20px;width: 320px;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
.tip{position: absolute;left: 0;line-height: 25px;background: #ccc;display: none;}


js============

(function () {
	function create() {
		var tip=document.createElement(‘div‘);
		tip.className=‘tip‘;
		return document.body.appendChild(tip);
	}
	var tip=create();
	var links=document.getElementsByTagName(‘a‘)
	for (var i = 0; i < links.length; i++) {
		links[i].onmousemove=function (e) {
			var e=e||window.e;
			var title=this.getAttribute(‘data-title‘);
			tip.innerHTML=title;
			tip.style.display=‘block‘;
			tip.style.left=e.clientX+10+‘px‘;
			tip.style.top=e.clientY+5+‘px‘;
		}
		links[i].onmouseout=function(){
			tip.style.display=‘none‘;
		}
	}
})()