开发者学堂课程【移动 Web 前端开发：产品-优惠券-工具提示 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8469
产品-优惠券-工具提示
有一个动态的交互功能，提供一个类似组件的功能给我们。这个组件的属于JavaScript 插件，点开 JavaScript 插件，点开工具提示找到 Tooltip on right。
在使用微金所这个项目的时候，尽可能的用到 Static tooltip 组件，但是肯定用不完，只要学会用一个常用的就可以了。
接下来使用工具 Tooltip 提示这个组件。
但是，前提是先要把这两个按钮位做出来，再赋予这两个按钮控制提示的功能就可以了。
一、组件：Static tooltip
（1）.建立一个新的盒子
Ø 先做出两个按钮，进入 index.html 在盒子 right 中新建一个盒子：
”tips”> //div取名
”red”>微 //tips有两种提示，这个是微
”green”>赣 //这个是赣
//容器写完了
Ø 进入 index.css 中，写样式：
.product_box .box_right .tips{
position:absolute; //这里定位需要变，父容器定位也要变
left:0;
top:10px;
width:100%; //宽度
text-align：center //居中
}
.product_box .box_right .tips span{
width:16px; //文字宽度
height:16px; //文字高度
font-size:12px;//font-size大小
border-width:1px; //边框宽度
border-style:solid;
display:inline-block;//变成块的元素
text-align：center
line-height:16px;
vertical-align:middle;
}
.product_box .box_right .tips .red{
color:red;
border-color:red;
}
.product_box .box_right .tips .green{
color:green;
border-color:green;
}
Ø 在 .product_box .box_right 中添加一项:
position:relative;
Ø 进入浏览器刷新之后效果如下：
Ø 要产生工具提示可以自行看一下组件下面的实例。
data-toggle 证明它是什么组件，data-placement 证明它的提示方向或者它的位置，title 提示的内容。三个属性提示内容。
（2）.优化盒子
”tips”>
”red” data-toggle=”tooltip” data-placement=”top” title=”微金宝”>微
”green” data-toggle=”tooltip” data-placement=”bottom” title=”江西省”>赣
Ø 进入浏览器，刷新后，将鼠标放上去就可以看到效果，这是默认就有的，没有用。
Ø 有些组件可以自己初始化，有些组件需要自己初始化。在工具提示的第一句话里面，你必须自己初始化（you must initialize them yourself ）。需要找到 data-toggle 属性调用这个方法。
Ø 在以下界面输入
$(‘.red’).tooltip();
$(‘.green’).tooltip(); //这一句话是把所有的tooltip都初始化一遍
示例：
$(‘.red’).tooltip();
【”red”data-toggle=”tooltip”data-placement=”top” title=”微金宝”>微
】 //找到一个叫red的
$(‘.green’).tooltip();
”green”data-toggle=”tooltip”data-placement=”bottom” title=”江西省”>赣
】
Ø 打开浏览器，刷新后，将鼠标放上去：
Ø /*初始页面上的工具提示*/
$(‘[data-toggle=”tooltip”]’).tooltip();
/** ITCAST WEB ... */
$(function(){
/*动态的响应式轮播图*/
Banner();
initTab();
/*初始页面上的工具提示*/
$(‘[data-toggle=’’tooltip’’]’).tooltip();
