This repository has been archived by the owner on Jan 27, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
56 lines (52 loc) · 3.53 KB
/
index.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
<!DOCTYPE html>
<!--// ===========================================
// jQuery Tooltips by Gary Hepting
// Last Updated:2013-1-11
// =========================================== //-->
<!--[if lt IE 6]> <html class="no-js ie lt-ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 6]> <html class="no-js ie ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo of jQuery Tooltips by Gary Hepting</title>
<link rel="stylesheet" type="text/css" href="tooltips.css" />
<style type="text/css">
/* demo styles */
* { margin:0;padding:0; }
body { padding:20px;font-family:sans-serif; }
.pull-right { float:right; }
.pull-left { float:left; }
</style>
</head>
<body>
<p><a class="pull-right tooltip" title="This is an example of a short popover tooltip on the right">Another Tooltip</a>
<a class="tooltip" title="This is an example of a short popover tooltip">Short Tooltip</a></p>
<br/>
<p><a class="pull-right long tooltip" title="This is an example of a very long popover tooltip that describes a bunch of information to users and should really be put in a modal lightbox window and not a tooltip because it's not very use friendly to have things this long and crazy in a tooltip">Another Long One</a>
<a class="long tooltip" title="This is an example of a very long popover tooltip that describes a bunch of information to users and should really be put in a modal lightbox window and not a tooltip because it's not very use friendly to have things this long and crazy in a tooltip">Long Tooltip</a></p>
<div style="position:fixed;bottom:20px;right:20px;left:20px;">
<p><a class="pull-right tooltip" title="This is an example of a short popover tooltip on the right">Another Tooltip</a>
<a class="tooltip" title="This is an example of a short popover tooltip">Short Tooltip</a></p>
<br/>
<p><a class="pull-right long tooltip" title="This is an example of a very long popover tooltip that describes a bunch of information to users and should really be put in a modal lightbox window and not a tooltip because it's not very use friendly to have things this long and crazy in a tooltip">Another Long One</a>
<a class="long tooltip" title="This is an example of a very long popover tooltip that describes a bunch of information to users and should really be put in a modal lightbox window and not a tooltip because it's not very use friendly to have things this long and crazy in a tooltip">Long Tooltip</a></p>
</div>
<!-- scripts -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="jquery-1.8.3.min.js"><\/script>')</script>
<script type="text/javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// initialize popovers
$('.tooltip[title]').tooltip({
delay: 100, // delay before showing (ms)
speed: 100 // animation speed (ms)
});
});
</script>
</body>
</html>