网页|利用提示框（Tooltip）实现弹窗效果

一、提示框的运用

二、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>密&nbsp;&nbsp;&nbsp;&nbsp;码</button>

<input type="button" class="btn  btn-default" data-toggle="tooltip" data-placement="right"  title="请输入12位密码"

style="width:  120px;height: 30px;"/>

<br /><br />

<button>性&nbsp;&nbsp;&nbsp;&nbsp;别</button>

&nbsp;&nbsp;&nbsp;&nbsp;

男<input type="radio" name="sex" id="man"  checked="checked"> &nbsp;&nbsp;

女<input type="radio" name="sex" id="feman"><br>

<br />

<button>籍&nbsp;&nbsp;&nbsp;&nbsp;贯</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>&nbsp;&nbsp;&nbsp;&nbsp;

<button>立即登录</button>

END编  辑   |   王楠岚

责  编   |   刘   连

where2go 团队

微信号：算法与编程之美