看程序学bootstrap31-插件之提示工具

最新推荐文章于 2024-08-08 07:40:01 发布

涂家豪

最新推荐文章于 2024-08-08 07:40:01 发布

阅读量105

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/tujiahao1/article/details/94038450

版权

bootstrap 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

示例 1 : 非Bootstrap工具提示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<button class="btn btn-default" title="提示信息">非Bootstrap工具提示</button>

示例 2 : 左侧提示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button style="margin-left:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="提示信息">鼠标悬停</button>
 
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

示例 3 : 右侧提示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button style="margin-right:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息">鼠标悬停</button>
 
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

示例 4 : 上方提示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button style="margin-top:50px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="提示信息">鼠标悬停</button>
 
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

示例 5 : 下方提示

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button style="margin-bottom:50px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="提示信息">鼠标悬停</button>
 
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>