bootstrap中的tooltip

来源：互联网发布：2016年全年经济数据编辑：程序博客网时间：2024/06/02 13:12

1、注意自己的替换成自己引用的文件路径。

2、实验代码：

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./public/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="public/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="public/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/tooltip.js"></script>
<script type="text/javascript" src="bootstrap/js/holder.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="container" style=" margin:60px;" >
<div>
<a href="#" title="" data-toggle="tooltip" data-original-title="上" data-palcement="top">top</a>
<a href="#" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="下" >bottom</a>
<a href="#" title="" data-placement="left" data-toggle="tooltip" data-original-title="左" >left</a>
<a href="#" title="" data-placement="right" data-toggle="tooltip" data-original-title="右" >right</a>
</div>
</div>
</body>
<script>
$('a').tooltip()
</script>
</html>

3、效果图：