js鼠标提示框请教

我刚刚学js，现在想做一个简单的提示框。功能是在鼠标移到到特定的dom元素上时在其上方出现一个提示框里面可以显示内容（我想把ajax里的内容通过参数传到提示框里），鼠标移出提示框消失。学得东西太少，所以现在一点思路也没有。网上搜的插件有些函数实在看不懂。那位可以提供以下思路或简单一点的代码让我参考参考，谢谢了……

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

其实还要有CSS基础的最简单使用title属性做
复杂点也就JS负责DIV的隐藏与显示（当然还有AJAX和DOM处理）而已，关键还是CSS鼠标划上去，弹出框的DIV显示，划出，弹出框的DIV隐藏
1. onmouseover,onmouseout 两个事件控制鼠标移入移出。
2. 悬浮层定位，要通过css+js 配合。
3. ajax 拉数据。。呃这个
三点疑问：
1.你移动鼠标快不快？
2.任意要显示提示的两个dom元素相隔多少像素？
3.ajax提交到哪里？本地？隔壁？南极洲？火星？
好吧，我表示光有思路还不行，求代码……（ajax什么的不管了，给我一个接口传参数就行）
一个简单的实例
<script>
document.write('<div id="dvTooltip" onmouseout="ttHide(event)" onmouseover="clearTimeout(tttimer)" style="display:none;background:#eee;border:solid 1px black"></div>');
if(window.Element)Element.prototype.contains=function(o){if(this==o)return true;while(o=o.parentNode)if(o==this)return true;return false;}
function _$(Id){return document.getElementById(Id);}
function getAbsPos(o){var p=new Object();p.x=o.offsetLeft;p.y=o.offsetTop;while(o=o.offsetParent){p.x+=o.offsetLeft;p.y+=o.offsetTop;}return p;}
var tttimer;
function toolTip(ct,o,w){
  clearTimeout(tttimer);
  var p=getAbsPos(o),dv=_$('dvTooltip');if(w==undefined)w=160;
  dv.innerHTML=ct;dv.style.position='absolute';dv.style.width=w+'px';
  dv.style.top=p.y+o.offsetHeight+'px';dv.style.left=p.x+o.offsetWidth+'px';
  dv.style.display='block'
}
function ttHide(e){var dv=_$('dvTooltip');if(typeof(e)=='boolean')dv.style.display='none';else{e=e||event;var ref=e.toElement||e.relatedTarget;if(!dv.contains(ref))dv.style.display='none';}}
function ttmouseout(){tttimer=setTimeout('ttHide(true)',300);}</script>
<a href="http://www.code-design.cn" onmouseover="toolTip('showbo，ajax版主',this)" onmouseout='ttmouseout()' target="_blank" class="biaotis">showbo</a><br/><a href="http://bbs.csdn.net" onmouseover="toolTip('程序员论坛',this)" onmouseout='ttmouseout()' target="_blank" class="biaotis">CSDN</a><br/><input type="text" onmouseover="toolTip('请输入内容',this)" onmouseout='ttmouseout()' />
上面的js代码错位了。。参考下面这个
<script>
document.write('<div id="dvTooltip" onmouseout="ttHide(event)" onmouseover="clearTimeout(tttimer)" style="display:none;background:#eee;border:solid 1px black"></div>');
if(window.Element)Element.prototype.contains=function(o){if(this==o)return true;while(o=o.parentNode)if(o==this)return true;return false;}
function _$(Id){return document.getElementById(Id);}
function getAbsPos(o){var p=new Object();p.x=o.offsetLeft;p.y=o.offsetTop;while(o=o.offsetParent){p.x+=o.offsetLeft;p.y+=o.offsetTop;}return p;}
var tttimer;
function toolTip(ct,o,w){
  clearTimeout(tttimer);
  var p=getAbsPos(o),dv=_$('dvTooltip');if(w==undefined)w=160;
  dv.innerHTML=ct;dv.style.position='absolute';dv.style.width=w+'px';
  dv.style.top=p.y+o.offsetHeight+'px';dv.style.left=p.x+o.offsetWidth+'px';
  dv.style.display='block'
}
function ttHide(e){var dv=_$('dvTooltip');if(typeof(e)=='boolean')dv.style.display='none';else{e=e||event;var ref=e.toElement||e.relatedTarget;if(!dv.contains(ref))dv.style.display='none';}}
function ttmouseout(){tttimer=setTimeout('ttHide(true)',300);}</script>
<a href="http://www.code-design.cn" onmouseover="toolTip('showbo，ajax版主',this)" onmouseout='ttmouseout()' target="_blank" class="biaotis">showbo</a><br/><a href="http://bbs.csdn.net" onmouseover="toolTip('程序员论坛',this)" onmouseout='ttmouseout()' target="_blank" class="biaotis">CSDN</a><br/><input type="text" onmouseover="toolTip('请输入内容',this)" onmouseout='ttmouseout()' />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的模板页</title>
<style type="text/css" rel="stylesheet">div
{
position:absolute;/*父元素采取绝对定位*/
border:1px solid green;
height:30px;
}
span
{
position:relative;/*子元素采取相对定位*/
bottom:-10px;
right:0px;
border:1px solid red;
display:block;

}</style>
<script type="text/javascript" >
var $=function(eleName)
{
return document.getElementsByTagName(eleName);
}
window.onload=function()
{
$('div')[0].onmouseout=function()
{
$('span')[0].style.display='none';
}
$('div')[0].onmouseover=function()
{
$('span')[0].style.display='block';
}
}
</script>
</head>
<body>
<div>这是一个提示框的小例子<span >提提提提</span></div>
</div>
昨晚想写个拖动页面元素的程序来着，没写成，正好写了个你这个程序，我说下思路
1，还是用onmouseover & onmouseout函数
2，我是用event.clientX event.clientY再加一些偏移来设置提示框的位置的。
3用style.display 控制显示或隐藏
4，还有一点的css，自己查下资料吧。
http://download.csdn.net/source/3207027
还是用jQuery插件吧, 人家专业做这个的, 比你做自己想半天来的好!简单, 轻松易用. 注: 他有几种弹出框, demo中最后一个才是div提示的.