​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<!-- Bootstrap CSS -->
5
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
6
<div class="container-fluid">
7
8
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Top shoes" style="margin:30px;">
9
  Shoes
10
</button>
11
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Right boot" style="margin:30px;">
12
  Boots
13
</button>
14
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Bottom uggs" style="margin:30px;">
15
  Ugg
16
</button>
17
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Left sock" style="margin:30px;">
18
  Socks
19
</button>
20
​
21
</div>
22
23
<!-- jQuery library -->
24
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
25
<!-- Bootstrap JS -->
26
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
27
​
28
<!-- Initialize Bootstrap functionality -->
29
<script>
30
// Initialize tooltip component
31
$(function () {
32
  $('[data-toggle="tooltip"]').tooltip()
33
})
34
​
35
// Initialize popover component
36
$(function () {
37
  $('[data-toggle="popover"]').popover()
38
})
39
</script>