Bootstrap 插件-提示工具

最新推荐文章于 2022-09-03 15:35:34 发布

litengbin

最新推荐文章于 2022-09-03 15:35:34 发布

阅读量1.6k

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 : 非Bootstrap工具提示
2 : 左侧提示
3 : 右侧提示
4 : 上方提示
5 : 下方提示

非Bootstrap工具提示

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

左侧提示

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="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>

右侧提示

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="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>

上方提示

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="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>

下方提示

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="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>