-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
90 lines (90 loc) · 5.16 KB
/
example.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
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tooltiper - jQuery Plugin</title>
<meta name="description" content="Tooltiper - jQuery Plugin">
<meta name="author" content="xcurveballx">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dst/css/main.css">
</head>
<body>
<header>
Tooltiper - jQuery Plugin
</header>
<div class="container-fluid">
<div class="row">
<div class="col example example1">
<header><p><h1>Basic usage</h1></p></header>
<p>Just select elements with <code>title</code> attribute and call <code>tooltiper()</code> on them inside jQuery's <code>ready()</code> function:</p>
<p><pre>$(".example1 a").tooltiper();</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="Tooltiper - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
<div class="row">
<div class="col example example2">
<header><p><h1>HTML inside tooltips</h1></p></header>
<p>In order to treat the content of tooltips as HTML pass <code>tooltipType: 'html'</code> option in <code>tooltiper()</code> plugin:</p>
<p><pre>$(".example2 a").tooltiper({tooltipType: 'html'});</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="<b>Tooltiper</b> - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
<div class="row">
<div class="col example example3">
<header><p><h1>Appearence mode of tooltips</h1></p></header>
<p>The default options are <code>'fadeIn/fadeOut'</code>. Other valid options are <code>['show', 'slideDown']</code> for appearence mode and <code>['hide', 'slideUp']</code> for disappearence mode:</p>
<p><pre>$(".example3 a").tooltiper({
tooltipAppearenceMode: 'slideDown',
tooltipDisappearenceMode: 'slideUp'
});</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="Tooltiper - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
<div class="row">
<div class="col example example4">
<header><p><h1>Appearence/disappearence speed </h1></p></header>
<p>The default option is <code>'fast'</code>. Other valid options are <code>['slow', 'normal']</code> or some numeric value:</p>
<p><pre>$(".example4 a").tooltiper({
tooltipShowSpeed: 300,
tooltipHideSpeed: 800
});</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="Tooltiper - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
<div class="row">
<div class="col example example5">
<header><p><h1>Bounding tooltip to the cursor</h1></p></header>
<p>By default the tooltips don't move after appearing. It is possible to change it and bound the tooltip to the cursor by passing in the option <code>tooltipBound: 'cursor'</code>:</p>
<p><pre>$(".example5 a").tooltiper({tooltipBound: 'cursor'});</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="Tooltiper - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
<div class="row">
<div class="col example example6">
<header><p><h1>Changing markup and styles of tooltips</h1></p></header>
<p>The tooltips are created as <code>span</code>s with some predefined css properties applied and class <code>js-tooltiper</code> is assigned. It is possible to change this initial setup:
<p><pre>$(".example6 a").tooltiper({
tooltipClass: "js-fancy-class",
tooltipElement: "div",
tooltipCss: {"color": "red"}
});</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="Tooltiper - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
<div class="row">
<div class="col example example7">
<header><p><h1>Tooltiper is chainable</h1></p></header>
<p>It means that other jQuery functions/plugins can be chained to the Tooltiper call:
<p><pre>$(".example7 a").tooltiper().on('click', function(event) {
event.preventDefault();
alert("This click-event handler has been chained to the Tooltiper!");
});</pre></p>
<a target="_blank" href="https://github.com/xcurveballx/tooltiper" title="Tooltiper - jQuery Plugin">Tooltiper</a> - jQuery plugin to make tooltips.<hr>
</div>
</div>
</div>
<footer>Available under the MIT license. Author - <a href="https://github.com/xcurveballx" target="_blank">xcurveballx</a> (©).</footer>
<script src="dst/js/main.js"></script>
</body>
</html>