-
Notifications
You must be signed in to change notification settings - Fork 10
/
tooltip_demo.html
80 lines (53 loc) · 3.23 KB
/
tooltip_demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
<title> Tooltip Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*Bootstrap popovers are initialized with the following script. In the options, I'm setting the placement to be on the right, the trigger to be hover rather than click, and to allow HTML from the JSON data source. */
$('[data-toggle="popover"]').popover({
placement : 'right',
trigger: 'hover',
html: true
});
/* Set the location where tooltips.json is. to demonstrate pulling from another site, I uploaded
the tooltips.json file to another domain and enabled CORS in that domain. If you don't enable CORS on the server where the JSON file resides, developers calling the file will get errors.
*/
var url = "http://idratherbetellingstories.com/wp-content/apidemos/tooltips.json";
$.get( url, function( data ) {
/* Bootstrap popover text is defined inside a data-content attribute inside an element. That's
why I'm using attr here. If you just want to insert content on the page, use append and remove the data-content argument from the parentheses.*/
$.each(data.entries, function(i, page) {
if (page.id == "basketball") {
$( "#basketball" ).attr( "data-content", page.body );
}
if (page.id == "baseball") {
$( "#baseball" ).attr( "data-content", page.body );
}
if (page.id == "football") {
$( "#football" ).attr( "data-content", page.body );
}
if (page.id == "soccer") {
$( "#soccer" ).attr( "data-content", page.body );
}
});
});
});
</script>
<style>
body {padding-left:50px;}
</style>
</head>
<body>
<h1>Tooltip Demo</h1>
<p>This page is purposely separated out from the rest of the theme so you can see the bare minimum code to add to a page.</p>
<p>Content in the tooltips (actually "popovers" according to Bootstrap lingo) is pulled in dynamically from another file on another domain here: <a href="http://idratherbetellingstories.com/wp-content/apidemos/tooltips.json">http://idratherbetellingstories.com/wp-content/apidemos/tooltips.json</a>. </p>
<p>I could have simply pulled it from the tooltips.json file in this theme, but I wanted to simulate serving up the data file from a remote site, like you might do with a UI.</p>
<div class="alert alert-info" role="alert"><b>Note:</b> Make sure you view the file source so you can read the notes I've added in code comments.</div>
<!-- the glyphicon class provides the info icon.-->
<p>Basketball <span class="glyphicon glyphicon-info-sign" id="basketball" data-toggle="popover"></span></p>
<p>Baseball <span class="glyphicon glyphicon-info-sign" id="baseball" data-toggle="popover"></span></p>
<p>Football <span class="glyphicon glyphicon-info-sign" id="football" data-toggle="popover"></span></p>
<p>Soccer <span class="glyphicon glyphicon-info-sign" id="soccer" data-toggle="popover"></span></p>