Bootstrap插件（四）——工具提示（tooltip.js）

最新推荐文章于 2022-05-02 15:32:29 发布

原创最新推荐文章于 2022-05-02 15:32:29 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #插件 #tooltip.js #工具提示

front-end(bootstrap) 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了Bootstrap的工具提示插件tooltip.js的使用方法。通过示例代码展示了如何创建不同位置的工具提示，并强调了data-toggle、data-original-title和data-placement属性在实现中的关键作用。

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

工具提示的应用场景是某些内容的辅助提示，在元素被点击或者获取焦点是提示用户。都是比较简单是使用，我依然直接用一个例子来进行学习。

依然是先看实现的效果，效果图如下：

代码实现如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->

    <script type="application/javascript" src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
</head>
<body style="margin: 80px">
    <!--
      1. 设置 data-toggle="tooltip"
      2. data-original-title="right tooltip"设置提示的内容
      3. data-placement="bottom"设置提示显示的位置
      4. js设置 $('[data-toggle="tooltip"]').tooltip()
    -->
    <div class="tips-demo">
        <button type="button" class="btn btn-info" data-original-title="left tooltip" data-toggle="tooltip"
                data-placement="left">left tooltip</button>
        <button type="button" class="btn btn-warning" data-original-title="top tooltip" data-toggle="tooltip"
                data-placement="top">top tooltip</button>
        <button type="button" class="btn btn-success" data-original-title="right tooltip" data-toggle="tooltip"
                data-placement="right">right tooltip</button>
        <button type="button" class="btn btn-primary" data-original-title="bottom tooltip" data-toggle="tooltip"
                data-placement="bottom">bottom tooltip</button>
    </div>
</body>
</html>