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

来源：互联网发布：蜘蛛侠英雄归来知乎编辑：程序博客网时间：2024/06/05 10:49

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

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

代码实现如下：

<!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>

阅读全文

0 0