一、提示框的运用
二、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 团队
微信号:算法与编程之美
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。