tooltip主要是根据鼠标的移动到相应的文字上面，下面出现提示小浮动层效果，主要是用jquery来实现，代码下：
var $win = $(window);
//默认的参数
var default_options = {
element: null, //要加提示的元素，必填项
height:'auto', //浮动层的高度
width:'auto',
message:null //添加的提示信息，也可以在element的data-tip属性上加
};
tipObj= {
init:function(options){
this.render(options)
},
//创建浮动层的dom结构，并填加到body中
createDOM:function(element){
var that = this;
that.wrapper= $('<div class="tool-tip-box"></div> ');
$('body').append(this.wrapper);
return this;
},
//初始化
render:function(options){
var that = this,
//参数合并
options = $.extend(default_options,options),
msg = options.message !=null?options.message : options.element.data('tip');
that.createDOM(options.element);
that.wrapper.css({
width: options.width,
height:options.height
}).html(msg);
that.setPosition(options.element);
options.element.on('mouseleave',function(e){
that.wrapper.remove();
})
},
//设置提示浮动层的位置，定位
setPosition:function(element){
var left = element.offset().left,
top = element.offset().top+element.height();
this.wrapper.css({
position:'absolute',
left:left,
top:top
});
return this;
}
}
//接口
$.tip =$.Tip= function(options){
return tipObj.init(options);
html代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ToolTip效果</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="tootip.js"></script>
<style>
body{
font-size:14px;
line-height:1.8;
font-family:"Microsoft YaHei", "微软雅黑";
}
#demo{
width:500px;
margin:30px auto;
padding: 20px 30px;
position:relative;
background-color:#fff;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
-moz-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
-webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
}
#demo h2{
color: #03F;
}
#demo .tooltip{
color:#03F;
cursor:help;
}
.tool-tip-box{
display:block;
background:#fff;
line-height:1.6;
border:1px solid #66CCFF;
color:#333;
padding:20px;
font-size:12px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
overflow:auto;
}
</style>
</head>
<body>
<div id="demo">
<p>
ToolTip效果还可以用来显示图片，例：<a class="tooltip" data-tip="当然显示一块儿带格式的内容也不在" id="">蓝枫</a>。当然显示一块儿带格式的内容也不在话下，例：
<a class="tooltip" data-tip="蓝枫秋秋">我的资料</a>。
</p>
</div>
<script>
$(function(){
$('.tooltip').on('mouseenter',function(e){
var $this = $(this);
$.tip({
element:$this
})
})
})
</script>
</body>
</html>
