开发者学堂课程【jQuery 开发教程：jQuery 特效实例_幽灵按钮4】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4315
jQuery 特效实例_幽灵按钮4
一、代码示例
实现 tooltip 提示框思路，要写一个div来承载提示框，需要位置的计算和下面的三角号，已经显示里面的内容。
首先让提示框承载出来，然后通过js控制位置。
(1)承载提示框，以及字体三角符号
.box . tooltip{ //观察可以看到效果有应该设置宽度和高度，仔细观察宽度是自动撑开的，高度是固定的，然后有一个边框圆角的效果，设置字体以及下面的三角符号。
position: absolute; //设置绝对定位
padding: 0 15px; //中间字体不是靠边的，设置上下为0px，左右为15px
height: 35px; //高度为35px
background-color: #2dcb70; //设置背景颜色为绿色
border-radius: 5px; //设置圆角效果为5px
line-height: 35px;
margin: 0 auto; //使文字垂直居中
color: #ffffff; //设置字体颜色为白色
font-size: 18px; //字体大小为18px
font-weight: 700; //字体加粗效果
}
文本框效果图：
.box . tooltip span{ //三角形符号
position: absolute; //设置为绝对定位
width:0; //高度为0
height:0; //宽度为0
border: 8px solid transparent; //边框宽度为8px，实线，给一个透明的颜色
border- top-color: #2dcb70; //设置上边框颜色为绿色
Left: 50%; //使得三角符号居中
margin-left: -4p; //三角号再左一点
}
运行结果：
(2)script鼠标移动上动态获取，添加文本
观察可知文本的添加都是动态获取动态添加的。
首先可以写div承载提示框，类名为tooltip，里面的内容可以用<em>承载，也可以用span标签，文本框下面的三角号也可以用<span>标签承载，
通过index.html主体代码为：
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="app.css" type="text/css"/>
< /head>
<body>
<div class="box">
<div class="link Link-miss">
<span class="icon"></span>
<a href="#" class="button" data-text=”My mission is clear”>
//使用自定义属性添加内容并且可以获取到
<span class="line line- top"></span>
<span class="line Line-left"></span>
<span class="line line-right"></span>
<span class="line line- bottom"></span>
MISSION
</a>
</div>
<div class="link link-play">
<span class="icon">< /span>
<a href="#" class= "button" data-text=”This is my playground”>
<span class="line Line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line- bottom"></span>
PLAY
</a>
</div>
<div class="link link- touch'">
<span class="icon"></span>
<a href="#" class="button" data-text=”Lets do something together”>
<span class="line line- top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line- bottom"> </span>
TOUCH
</a>
</div>
<div class="tooltip">
<em> </em> //随便添加内容，便于观察，设置成em标签方便查找span
<span></span>
</div>
</div>
<script src=”jquery-2.2.1.min.js”></script>
//使用js动态获取内容，并添加到<em>标签中
<script>
$( function(){
$(".button") . hover ( function() { //当鼠标略过时获取按钮，hover有两个参数，都为函数类型
var titleText=$(this) .attr ("data- text") ;
//获取内容，声明变量titleText获取data- text内容
$(". tooltip em"). text(titleText);//使用指针指向，attr的方式动态获取titleText内容并添加
//返回的是个对象，只要获取距离左边的位置即可
var leftLoc=$(this).offset() .left;
var addleft=($(". tooltip"). outerWidth()-$(this) .outerwidth())/2;
//将距离赋给提示框，声明需要移动左边的距离变量 addleft，因为是自适应的一个宽度，所以要动态获取 tooltip，然后减去当前bottom的宽度。
$(". tooltip").css({
left: leftLoc-addleft；
top:140
}) .animate({ //添加自定义动画
top:195,
opacity: 1
},300) //动画执行时间为300
}, function(){
})
})
</script>
< /body>
< /html>
最终效果图：