Bootstrap插件(四)——工具提示(tooltip.js)

         工具提示的应用场景是某些内容的辅助提示,在元素被点击或者获取焦点是提示用户。都是比较简单是使用,我依然直接用一个例子来进行学习。
依然是先看实现的效果,效果图如下:
Bootstrap插件(四)——工具提示(tooltip.js)_第1张图片
 代码实现如下:
1
DOCTYPE html>
2
<html>
3
<head lang="en">
4
    <meta charset="UTF-8">
5
    <title>组件</title>
6
    
7
    <link href="css/bootstrap.min.css" rel="stylesheet">
8
    
9
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
    
11
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
12
    <script>
13
        $(function () {
14
            $('[data-toggle="tooltip"]').tooltip()
15
        })
16
    </script>
17
</head>
18
<body style="margin: 80px">
19
20
    
26
27
    <div class="tips-demo">
28
        <button type="button" class="btn btn-info" data-original-title="left tooltip" data-toggle="tooltip"
29
                data-placement="left">left tooltip</button>
30
        <button type="button" class="btn btn-warning" data-original-title="top tooltip" data-toggle="tooltip"
31
                data-placement="top">top tooltip</button>
32
        <button type="button" class="btn btn-success" data-original-title="right tooltip" data-toggle="tooltip"
33
                data-placement="right">right tooltip</button>
34
        <button type="button" class="btn btn-primary" data-original-title="bottom tooltip" data-toggle="tooltip"
35
                data-placement="bottom">bottom tooltip</button>
36
    </div>
37
38
</body>
39
</html>
40

你可能感兴趣的:(Bootstrap插件(四)——工具提示(tooltip.js))