bootstrap中的tooltip_bootstrap tooplist-优快云博客

本文链接：https://blog.youkuaiyun.com/ling811/article/details/16856307

本文介绍了如何在网页中利用Bootstrap库实现基本的交互效果，包括顶部导航、底部导航、左右导航等，并通过jQuery和Tooltip插件增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

2、实验代码：

<!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、效果图：