一、提示框的运用
提示框是指当鼠标移动到指定元素上时，会显示出一个提示框显示提示信息。常见的提示工具触发器是a链接、input输入框和button按钮。提示框可在所选位置定位的上下左右显示提示内容，其默认位置是上方。
二、Tooltip简单介绍
提示工具（Tooltip）是一个插件，可以根据需求生成标记内容，但在默认情况下是把提示工具（tooltip）放在它们的触发元素后面。在bootstrap中可以用data-toggle="tooltip"的方法实现效果。
如下是tooltip的一些常见方法和属性：
图2.1 常见方法
图2.2 常用属性
三、制作步骤
（1）利用data-toggle="tooltip"实现提示框效果。这里就是用的提示框的默认位置：上。Title就是显示需要的提示内容。
<a data-toggle="tooltip" title="点击进入详情页">关于我们</a> |
3.1默认提示框
这里使用Toggle: .tooltip('toggle')方法。当然也可以使用图2.1介绍的其他方法。
<script> $(function () { $("[data-toggle='tooltip']").tooltip(); }); </script> |
（2）显示不同位置的提示框。利用data-placement="top"、data-placement="bottom"、data-placement="left"、data-placement="right"在不同位置显示。
<h2>提示框效果</h2> 这是一个页面：<a href="#" data-toggle="tooltip" data-placement="top" title="点击进入详情页">关于我们1</a></br> 这是一个页面：<a href="#" data-toggle="tooltip" data-placement="bottom" title="点击进入详情页">关于我们2</a></br> 这是一个页面：<a href="#" data-toggle="tooltip" data-placement="left" title="点击进入详情页">关于我们3</a></br> 这是一个页面：<a href="#" data-toggle="tooltip" data-placement="right" title="点击进入详情页">关于我们4</a></br> |
3.2不同位置显示效果
（3）在bootstrap中提示插件，默认提示框的背景是黑色的，文字是白色，带有箭头。如果想要修改样式，需要先了解在bootstrap封装样式中，对于提示框的命名（tooltip-inner），在设置样式进行修改。
.tooltip-inner{ background:green;/*背景颜色*/ color:red;/*文字颜色*/ } |
3.3样式修改
（4）利用提示工具制作登录注册页面。这样提示信息就会更醒目。
3.4 登录注册
button>用户名</button> <input type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="请输入用户名" style="width: 120px;height: 30px;"/> <br /><br /> <button>密 码</button> <input type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="请输入12位密码" style="width: 120px;height: 30px;"/> <br /><br />
<button>性 别</button> 男<input type="radio" name="sex" id="man" checked="checked"> 女<input type="radio" name="sex" id="feman"><br> <br /> <button>籍 贯</button> <select id="city" name="city" onchange="codeCity()" style="width: 120px;height: 30px;"> <option value="0">-请选择-</option> <option value="1">四川</option> <option value="2">南充</option> <option value="3">北京</option> </select><span id="citySpan"></span><br> <br /> <button>立即注册</button> <button>立即登录</button> |
