提示框(Tooltip)，玩转Bootstrap（JS插件篇）教程-慕课网

提示框(Tooltip)

插件源文件：tooltip.js

（引用地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tooltip.js"></script>）

样式文件：
LESS版本：对应源文件 tooltips.less
Sass版本：对应源文件 _tooltips.scss

编译出来的Bootstrap：对应bootstrap.css文件第5497行～第5594行
提示框(tooltiip)效果也是Web常见的一种效果，如下图所示：

当用户鼠标悬浮在“当天13:00”上面时，就会出现浅黄色的提示信息框，常常把这种效果称之为提示框。

任务

?不会了怎么办

index.html

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>触发提示框方法</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title=""> 提示框居左 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在顶部"> 提示框在顶部 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-original-title="提示框在底部"> 提示框在底部 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="提示框居右"> 提示框居右 </button> <h3>链接制作的提示框</h3> <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示框居左"> 提示框居左 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="提示框在顶部"> 提示框在顶部 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示框在底部"> 提示框在底部 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示框在居右"> 提示框居右 </a> <a href="##" class="btn btn-primary" id="myTooltip"> 我是提示框 </a> <a href="##" class="btn btn-primary" id="myTooltip2"> 我是提示框2 </a> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); </script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

3-7 提示框(Tooltip)

提示框(Tooltip)

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐