一、提示框的运用
二、Tooltip简单介绍
提示工具(Tooltip)是一个插件，可以根据需求生成标记内容，但在默认情况下是把提示工具(tooltip)放在它们的触发元素后面。在bootstrap中可以用data-toggle="tooltip"的方法实现效果。
如下是tooltip的一些常见方法和属性：
图2.1 常见方法
图2.2 常用属性
三、制作步骤
(1)利用data-toggle="tooltip"实现提示框效果。这里就是用的提示框的默认位置：上。Title就是显示需要的提示内容。关于我们
3.1默认提示框
这里使用Toggle: .tooltip('toggle')方法。当然也可以使用图2.1介绍的其他方法。
$(function () { $("[data-toggle='tooltip']").tooltip(); });
(2)显示不同位置的提示框。利用data-placement="top"、data-placement="bottom"、data-placement="left"、data-placement="right"在不同位置显示。
提示框效果
这是一个页面：关于我们1
这是一个页面：关于我们2
这是一个页面：关于我们3
这是一个页面：关于我们4
3.2不同位置显示效果
(3)在bootstrap中提示插件，默认提示框的背景是黑色的，文字是白色，带有箭头。如果想要修改样式，需要先了解在bootstrap封装样式中，对于提示框的命名(tooltip-inner)，在设置样式进行修改。.tooltip-inner{
background:green;/*背景颜色*/
color:red;/*文字颜色*/
}
3.3样式修改
(4)利用提示工具制作登录注册页面。这样提示信息就会更醒目。
3.4 登录注册button>用户名
style="width: 120px;height: 30px;"/>
密码
style="width: 120px;height: 30px;"/>
性别
男
女
籍贯
-请选择-
四川
南充
北京
立即注册
立即登录END
编 辑 | 王楠岚
责 编 | 刘 连where2go 团队微信号：算法与编程之美
