示例 2 : 左侧提示 示例 3 : 右侧提示 示例 4 : 上方提示 示例 5 : 下方提示
非Bootstrap工具提示
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<button class="btn btn-default" title="提示信息">非Bootstrap工具提示</button>
<!DOCTYPE html> <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <button class="btn btn-default" title="提示信息">非Bootstrap工具提示</button>
左侧提示
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>
<!DOCTYPE html> <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://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>
右侧提示
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>
<!DOCTYPE html> <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://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>
上方提示
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>
<!DOCTYPE html> <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://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>
下方提示
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://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>
<!DOCTYPE html> <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://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>
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|