网页|利用提示框（Tooltip）实现弹窗效果
一、提示框的运用
提示框是指当鼠标移动到指定元素上时，会显示出一个提示框显示提示信息。常见的提示工具触发器是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>END
编 辑 | 王楠岚
责 编 | 刘 连
where2go 团队
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-05-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读