toolTip----工具提示，提示信息，提示框，提示文本
ToolTip效果可以是网站上一些帮助和提示信息表现得更直观，提升用户的体验，让网站更具创意和创新。
解决问题流程：
分析 ：
toolTip提示框：浮动的提示框，tooltip提示框可以显示出来
toolTip超链接：指一些文字或图片元素
特效
（1）显示：鼠标移动到tooltip超链接上时，提示框显示
（2）隐藏：鼠标移开时，提示框自动隐藏
（3）定位：提示框的文字需要根据提示框超链接确定
（4）可配置：提示框可以根据参数不同的，改变尺寸和显示内容
技术：
1.定位：position:absolute;
2.js创建dom:createElement和appendChild把元素节点追加到已有的元素---联合使用
3.鼠标事件：
mouseenter：当鼠标指针进入一个元素的边界区域时触发这个事件
mouseleaver当鼠标指针离开一个元素的边界区域时触发这个
mouseover和mouseenter事件的区别：
不论鼠标指针穿过被选元素或其子元素都会触发mouseover事件，对应是mouseout
只要在鼠标指针穿过被选元素后，才会触发mouseenter事件对应是mouseleave
setTimeout :在指定的毫秒数后调用函数或计算表达式
注意：setTimeout只执行一次
clearTimeter
核心代码：
<a class='tooptip'>中国<div class='tooltip-box'></box></a>
圆角边框需要兼容，旧版本浏览器并不支持。
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
编码开发：
开发工具：Dreamweaver
浏览器：Chrome;
cursor:help;---是网页制作css中光标类型是问号
cursor:hand是手型；
cursor:pointer--使用最多的
cursor:crosshairs是十字型
hand是手型
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
解决关键问题：
1提示框浮动显示
2.提示框位置
3.提示框宽高
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ToolTip效果</title>
<style>
body{
font-size:14px;
line-height:1.8;
background:url("bg.jpg") no-repeat center top;
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;
}
.tooltip-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;
}
#mycard img {
float: left;
width: 100px;
height: 100px;
padding: 10px;
}
#mycard p {
float: left;
width: 150px;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="demo">
<h2>原生JavaScript实现ToolTip效果</h2>
<p>ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
比如简称文字显示一行文字全称，例：<a class="tooltip" id="tooltip1">中国</a>， <a class="tooltip" id="tooltip2">NBA</a>。
又比如显示一段文字，例：唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么？如果不看tooltip提示你背不出来的话，那么你
可要加油了。
</p>
<p>
ToolTip效果还可以用来显示图片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例：
<a class="tooltip" id="tooltip5">我的资料</a>。
</p>
<p>
甚至你可以显示一整个网站：例：<a class="tooltip" id="tooltip6">慕课网</a>。
</p>
<p>
注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。
</p>
</div>
<script>
function addEvent(element, event, callbackFunction) {
if (element.addEventListener) {
element.addEventListener(event, callbackFunction, false);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callbackFunction);
}
}
var toolTipBoxClass = "tooltip-box";
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
var getEl = function(id){
return document.getElementById(id);
}
var demo = getEl("demo");
//obj - ToolTip 超链接元素
//id - ToolTip提示框id
//html - ToolTip提示框HTML
//width - ToolTip提示框宽度（可选）
//height - ToolTip提示框高度（可选）
function showToolTip(obj, id, html, width, height){
if(getEl(id)==null){
//创建 <div class="tooltip-box" id="xx">xxxxxx</div>
var toolTipBox;
toolTipBox = document.createElement("div");
toolTipBox.className = toolTipBoxClass;
toolTipBox.id = id;
toolTipBox.innerHTML = html;
obj.appendChild(toolTipBox);
toolTipBox.style.width = width? width+"px":"auto";
toolTipBox.style.height = height? height+"px":"auto";
if(!width && isIE){
toolTipBox.style.width = toolTipBox.offsetWidth;
}
toolTipBox.style.position = "absolute";
toolTipBox.style.display = "block";
var left = obj.offsetLeft;
var top = obj.offsetTop + 20;
//left，不让ToolTip提示框超出浏览器
if(left + toolTipBox.offsetWidth > document.body.clientWidth){
var demoLeft = demo.offsetLeft;
left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
if (left < 0) left = 0;
}
toolTipBox.style.left = left + "px";
toolTipBox.style.top = top + "px";
addEvent(obj,"mouseleave", function(){
setTimeout(function(){
getEl(id).style.display = "none";
}, 300);
});
}
else{
//显示
getEl(id).style.display = "block";
}
}
addEvent(demo, "mouseover", function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
if(target.className == "tooltip"){
var _html;
var _id;
var _width = 200;
switch (target.id) {
case "tooltip1":
_id = "t1";
_html = "中华人民共和国";
break;
case "tooltip2":
_id = "t2";
_html = "美国篮球职业联赛";
break;
case "tooltip3":
_id = "t3";
_html = "<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>";
_width = 100;
break;
case "tooltip4":
_id = "t4";
_html = '<img src="1.jpg" width="500" />';
_width = 520;
break;
case "tooltip5":
_id = "t5";
_html = '<div id="mycard"><img src="2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
_width = 300;
break;
case "tooltip6":
_id = "t6";
_html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>';
_width = 500;
break;
default:
return false;
}
showToolTip(target, _id, _html, _width);
}
});
优化代码：
简化代码：
document.getElementById
优化绑定事件方式
function addEvent(element, event, callbackFunction) {
if (element.addEventListener) {
element.addEventListener(event, callbackFunction, false);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callbackFunction);
}
}
使用事件冒泡优化代码
事件冒泡：js的事件会一直向父级对象传播，直到他被处理
作用是事件冒泡允许多个操作被集中处理，把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上
