/
index.html
267 lines (237 loc) · 22.5 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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html>
<head>
<title>Jatt - Just Another ToolTip</title>
<!-- Demo only -->
<link href="demo/demo.css" rel="stylesheet">
<link href="demo/prettify.css" rel="stylesheet">
<script src="demo/prettify.js"></script>
<!-- jQuery (required) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Jatt (required) -->
<link href="css/jatt.css" rel="stylesheet">
<script src="js/jquery.jatt.js"></script>
<!-- Jatt (optional) -->
<script src="js/jquery.xdomainajax.js"></script>
<!-- Jatt initialization, see docs for options -->
<script>
$(function(){
prettyPrint();
$.jatt();
});
</script>
</head>
<body>
<div id="wrap">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="examples.html">Examples</a>
<a href="meta.html">Meta-data Demo</a>
<a class="current git" href="index.html">Documentation</a>
<a class="git" href="https://github.com/Mottie/Jatt/releases">Download</a>
<a class="issue" href="https://github.com/Mottie/Jatt/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<h1 class="center">Documents</h1>
<h2>Adding the Tooltips</h2>
First make sure you have jQuery installed on your site, download the latest version from <a href="http://jquery.com/">jQuery</a>. Then add the following CSS and script to your site, or you can <a href="http://github.com/Mottie/Jatt">download the script here</a>.<br>
<br>
<h3>Basic setup (add to head of document)</h3>
<blockquote class="pre">
<pre class="prettyprint lang-html"><link href="css/jatt.css" rel="stylesheet">
<script src="js/jquery.min.js"></script> <!-- minimum jQuery v1.7+ -->
<script src="js/jquery.jatt.js"></script>
<script>
$(function(){
$.jatt();
});
</script></pre>
</blockquote>
<h2>Using the Tooltips</h2>
<ul>
<li>
<h3>Basic Tooltip</h3>
<table class="keytable"><tbody>
<tr><td align="center" width="130"><a class="tooltip {direction:n;width:100px;background:#222;color:#ddd;}" href="#" title="Tooltip (a) Content">basic tip (a)</a></td><td><a class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-meta">{ direction: n; width: 100px; background: #222; color: #ddd; }</span>" href="<span class="highlight-url">#</span>" title="<span class="highlight-title">Tooltip (a) Content</span>">basic tip (a))</a></td></tr>
<tr><td align="center"><a class="tooltip preload {direction:ne;width:200px;}" href="demo/ajax-content.htm #target span">External page (a)</a></td><td><a class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-optional">preload</span> <span class="highlight-meta">{ direction: ne; width: 200px; }</span>" href="<span class="highlight-url">demo/ajax-content.htm #target span</span>">External page (a)</span></td></tr>
<tr><td align="center"><div class="tooltip {direction:e;width:150px;background:#9bff8f;color:#333;}" rel="#tip1">Object on page (div)</div><div id="tip1" style="display:none">Hi</div></td><td><div class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-meta">{ direction: e; width: 150px; background: #9bff8f; color: #333; }</span>" rel="<span class="highlight-url">#tip1</span>">Object on page (div)</div><br><div id="tip1" style="display:none"><span class="highlight-title">Hi</span></div></td></tr>
<tr><td align="center"><p class="tooltip {direction:se;width:200px;background:#800;color:#ddd;}" title="Tooltip (p) Content">paragraph (p)</p></td><td><p class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-meta">{ direction: se; width: 200px; background: #800; color: #ddd; }</span>" title="<span class="highlight-title">Tooltip (p) Content</span>">paragraph (p)</p></td></tr>
<tr><td align="center"><img class="tooltip {direction:s;width:200px;background:#808080;color:#000;opacity:1;}" src="demo/popup.gif" title="Tooltip (img) Content" /></td><td><img class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-meta">{ direction: s; width: 200px; background: #808080; color: #000; opacity: 1; }</span>" src="demo/popup.gif" title="<span class="highlight-title">Tooltip (img) Content</span>" ></td></tr>
<tr><td align="center"><span class="tooltip {direction:sw;width:150px;background:#008080;color:#ddd;}" title="Tooltip (span) Content">span (span)</span></td><td><span class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-meta">{ direction: sw; width: 150px; background: #008080; color: #ddd; }</span>" title="<span class="highlight-title">Tooltip (span) Content</span>">span (span)</span></td></tr>
<tr><td align="center"><input class="tooltip sticky {followMouse:false;direction:w;width:100px;background:#008;color:#ddd;}" style="width:50px;" title="Tooltip (input)" ></td><td><input class="<span class="highlight-tooltip">tooltip</span> <span class="highlight-optional">sticky</span> <span class="highlight-meta">{ followMouse: false; direction: w; width: 100px; background: #008; color: #ddd; }</span>" style="width:50px;" title="<span class="highlight-title">Tooltip (input)</span>"></td></tr>
</tbody></table>
<ul>
<li>class="<span class="highlight-tooltip">tooltip</span>" (required) - This class activates the tooltip</li>
<li>class="tooltip <span class="highlight-optional">preload</span>" (optional) - Adding a preload class tells the script to preload external content for this tooltip.</li>
<li>class="tooltip <span class="highlight-optional">sticky</span>" (optional) - Adding a sticky class tells the script to make the tooltip sticky. Additionally a close button is added.</li>
<li>class="tooltip <span class="highlight-meta">{ metadata }</span>" (optional) - Add any of the predefined options (listed below) or any css style to apply to the tooltip.</li>
<li>title="<span class="highlight-title">Tooltip content</span>" (optional) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML but Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='popup.gif'>. If you must use quotes to surround some text, use the HTML escape code <span class="highlight-title">&quot;</span> - this text has <span class="highlight-title">&quot;</span>quotes<span class="highlight-title">&quot;</span> around it.</li>
<li>rel="<span class="highlight-url">selector</span>" (optional) - If the "title" attribute is empty, the script will look in the "rel" attribute for a selector that points to an object containing the tooltip content (see the "External object (div)" example above).</li>
<li>href="<span class="highlight-url">page.htm #target span</span>" (optional) - If the "title" and "rel" attributes are both empty, the script will look in the "href" attribute for a URL to an external page. The URL can be followed by an id or class selectors pointing to the tooltip contents (see the "External page (a)" example above).</li>
</ul>
</li><br>
<li>
<h3>Preview Tooltips</h3>
<table class="keytable"><tbody>
<tr><td align="center"><a class="preview {direction:e;opacity:1;text-align:center;}" href="demo/google2.png" title="Google's Logo"><img src="demo/google1.png" /></a></td><td><a class="<span class="highlight-tooltip">preview</span> <span class="highlight-meta">{ direction: e; opacity: 1; text-align: center; }</span>" href="<span class="highlight-url">URL to full size image</span>" title="<span class="highlight-title">Google's Logo</span>"><span class="highlight-text"><img src="</span><span class="highlight-text">URL to image thumbnail"></span></a> </td></tr>
</tbody></table>
<ul>
<li>class="<span class="highlight-tooltip">preview</span>" (required) - This class activates the tooltip which puts the linked image (from the href) into a tooltip. The tooltip size is adjusted automatically to fit the image.</li>
<li>class="preview { metadata }" (optional) - Add any of the predefined options (listed below) or any css style to apply to the tooltip.
<li>href="<span class="highlight-url">URL to full size image</span>" (required) - URL to the image, for previewing in the tooltip and the URL you go to when you click on the image.</li>
<li>title="<span class="highlight-title">TOOLTIP CONTENT</span>" (optional) - This content becomes the image caption located below the image inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='demo/google1.png'>. If you must use quotes to surround some text, use the HTML escape code <span class="highlight-title">&quot;</span> - this text has <span class="highlight-title">&quot;</span>quotes<span class="highlight-title">&quot;</span> around it.</li>
<li><span class="highlight-text"><img src="URL to image thumbnail"></span> (required) - This will be the thumbnail of the URL image (in orange), or you can pick any image as I did here. Or you can replace the <img> with text.</li>
</ul>
<br>
</li>
<li><h3>Screenshot Tooltips</h3>
<table class="keytable"><tbody>
<tr><td align="center"><a class="screenshot {direction:e;opacity:1;text-align:center;}" href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" rel="demo/site.jpg" title="Loch Modan Yacht Club">LMYC</a></td><td><a class="<span class="highlight-tooltip">screenshot</span> <span class="highlight-meta">{ direction: e; opacity: 1; text-align: center; }</span>" href="<span class="highlight-url">http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295</span>" title="<span class="highlight-title"><center>Loch Modan Yacht Club</center></span>" rel="<span class="highlight-rel">Website_Screenshot.jpg</span>"><span class="highlight-text">LMYC</span></a></td></tr>
<tr><td><a class="screenshot {direction:e;}" href="http://www.google.com/" rel="#" title="<center>Google</center>">Google</a></td><td><a class="<span class="highlight-tooltip">screenshot</span> <span class="highlight-meta">{ direction: e; }</span>" href="<span class="highlight-url">http://www.google.com</span>" title="<span class="highlight-title"><center>Google</center></span>" rel="<span class="highlight-rel">#</span>"><span class="highlight-text">Google</span></a></td></tr>
</tbody></table>
<ul>
<li>class="<span class="highlight-tooltip">screenshot</span>" (required) - This class activates the tooltip that gets the site screenshot image from the rel attribute (in <span class="highlight-rel">light blue</span>)</li>
<li>href="<span class="highlight-url">URL</span>" (required) - URL of the target website</li>
<li>title="<span class="highlight-title">Tooltip content</span>" (optional) - This content becomes the screenshot (image) caption inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='demo/google1.png'>. If you must use quotes to surround some text, use the HTML escape code <span class="highlight-title">&quot;</span> - this text has <span class="highlight-title">&quot;</span>quotes<span class="highlight-title">&quot;</span> around it.</li>
<li>rel="<span class="highlight-rel">Website_Screenshot.jpg</span>" or rel="<span class="highlight-rel">#</span>" (required) This attribute can contain either the URL to the screenshot image of the site to which you have the link pointing. Yes, you will have to take, resize and upload the screenshot image yourself OR you can now use rel="<span class="highlight-rel">#</span>" to have <a href="http://www.thumbalizr.com/">Thumbalizr.com</a> generate a thumbnail of the site for you.</li>
<li><span class="highlight-text">text or image</span> (required) - Text or image that becomes the clickable link to the site.
</ul>
</li><br>
</ul>
</li>
</ul>
<h2>Customizing</h2>
<ul>
<li><h3>Initializing the script (showing all default settings)</h3></li>
</ul>
<blockquote class="pre">
<pre class="prettyprint lang-js">$(function(){
$.jatt({
// options that can be modified by metadata
direction : 'n', // direction of tooltip
followMouse : true, // tooltip follows mouse movement
content : 'title', // attribute containing tooltip text
speed : 300, // tooltip fadein speed
local : false, // if true, the script attachs the tooltip locally & to the body if false
xOffset : 20, // x distance from mouse (no negative values)
yOffset : 20, // y distance from mouse (no negative values)
zIndex : 1000, // z-index of tooltip
// options not supported by metadata
metadata : 'class', // attribute containing the metadata, use "false" (no quotes) to disable.
extradata : 'rel', // Change using the rel attribute; stores object id on the page (basic tooltip) or image URL (screenshot)
activate : 'mouseenter focusin', // how tooltip is activated
deactivate : 'mouseleave focusout', // how tooltip is deactivated
cacheData : true, // Cache data obtained from external pages, set to false if the data is dynamic.
websitePreview : 'https://api.thumbalizr.com/?width=250&url=', // use your own custom thumbnail service api string.
// Callbacks
initialized : null, // occurs when the tooltip is called - when hovering over an object
beforeReveal : null, // occurs when the tooltip is fully formed, but still hidden
revealed : null, // occurs when the tooltip is revealed
hidden : null, // occurs when the tooltip is hidden (removed)
// Messages
loading : 'Loading...', // Message shown while content is loading
notFound : 'No tooltip found', // Message shown when no tooltip content is found
imagePreview : 'Image preview', // image alt message for the image shown in the preview tooltip
siteScreenshot : 'URL preview: ', // image alt message for site screenshots, this message is followed by the URL
// change tooltip, screenshot and preview class - note that all classes have a "." in front
tooltip : '.tooltip', // tooltip class
screenshot : 'a.screenshot', // screenshot class
preview : 'a.preview', // preview class
preloadContent : '.preload', // Add this class to preload tooltip content (not preview or screenshot).
sticky : '.sticky', // Add this class to make a tooltip sticky. Only one tooltip on the screen at a time though.
// events triggered on the document (NEW in v2.9)
events : {
init : 'jatt-initialized',
b4Reveal : 'jatt-beforeReveal',
reveal : 'jatt-reveal',
hidden : 'jatt-hidden'
},
// tooltip & preview ID (div that contains the tooltip)
tooltipId : 'jatt-tooltip', // ID of actual tooltip
previewId : 'jatt-preview' // ID of screenshot/preview tooltip
// REMOVED
// live : false // use live event support? REMOVED v2.9!
});
});</pre>
</blockquote>
<ul>
<li><h3>List of Options</h3>
<table class="keytable">
<tbody>
<tr>
<th>Key</th>
<th>Value<br />(default shown)</th>
<th>Description</th>
</tr>
<tr><td>direction</td><td class="str">'n'</td><td>Choose the direction of the tooltip (in quotes; choose from n, ne, e, se, s, sw, w, nw).</td></tr>
<tr><td>followMouse</td><td class="kwd">true</td><td>When hovering over the object with a tooltip, the tooltip will follow the mouse if true. If false, it will be positioned relative to the object.</td></tr>
<tr><td>content</td><td class="str">'title'</td><td>Attribute containing the tooltip content. By default it is the "title" attribute.</td></tr>
<tr><td>speed</td><td class="lit">300</td><td>Time in milliseconds for the tooltip to fade in. By design the tooltip has no fade out because it is removed immediately.</td></tr>
<tr><td>local</td><td class="kwd">false</td><td>Where the tooltip is attached. By default it is false and will attach to the document body; if true, it will be attached before the object.</td></tr>
<tr><td>xOffset</td><td class="lit">20</td><td>Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the X direction.</td></tr>
<tr><td>yOffset</td><td class="lit">20</td><td>Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the Y direction.</td></tr>
<tr><td>zIndex</td><td class="lit">1000</td><td>Adjust this if the tooltip is below another object.</td></tr>
<tr><td>metadata</td><td class="str">'class'</td><td>Location of the tooltip metadata. By default it will look in the class attribute. If set to "false" it will disable the metadata.</td></tr>
<tr><td>extradata</td><td class="str">'rel'</td><td>Change using the rel attribute; stores object id on the page (basic tooltip) or image URL (screenshot).</td></tr>
<tr><td>activate</td><td class="str">'mouseenter focusin'</td><td>The event that causes the tooltip to display information.</td></tr>
<tr><td>deactivate</td><td class="str">'mouseleave focusout'</td><td>The event that causes the tooltip to be removed.</td></tr>
<tr><td>cacheData</td><td class="kwd">true</td><td>Cache data obtained from external pages, set to false if the data is dynamic.</td></tr>
<tr><td>websitePreview</td><td class="str">'https://api.thumbalizr.com/?width=250&url='</td><td>use your own custom thumbnail service (api string - http://thumbalizr.com/apitools)</td></tr>
<tr><td>initialized</td><td class="kwd">null</td><td>This event/callback occurs when the tooltip is called - when hovering over an object</td></tr>
<tr><td>beforeReveal</td><td class="kwd">null</td><td>This event/callback occurs when the tooltip is fully formed, but still hidden</td></tr>
<tr><td>revealed</td><td class="kwd">null</td><td>This event/callback occurs when the tooltip is revealed</td></tr>
<tr><td>hidden</td><td class="kwd">null</td><td>This event/callback occurs when the tooltip is hidden (removed)</td></tr>
<tr><td>loading</td><td class="str">'Loading...'</td><td>This message is shown while content is loading. You can also use a loading image (e.g. '<code><img src="images/loading.gif"/></code>'). It is replaced once the content has loaded.</td></tr>
<tr><td>notFound</td><td class="str">'No tooltip found'</td><td>This message is shown when no tooltip content is found.</td></tr>
<tr><td>imagePreview</td><td class="str">'Image preview'</td><td>This content will be added to the preview image alt attribute, so it is only seen while the image loads.</td></tr>
<tr><td>siteScreenshot</td><td class="str">'URL preview: '</td><td>This content and the site url is added to the screenshot image alt attribute, and only seen while the image loads.</td></tr>
<tr><td>tooltip</td><td class="str">'.tooltip'</td><td>The class used to activate the tooltip. And the ID of the actual tooltip.</td></tr>
<tr><td>screenshot</td><td class="str">'a.screenshot'</td><td>The class used to activate the screenshot script which shows an image associated with the URL. And this is the ID of both the screenshot & preview tooltips.</td></tr>
<tr><td>preview</td><td class="str">'a.preview'</td><td>The class used to activate the preview script which shows the an image in the tooltip from the href.</td></tr>
<tr><td>preloadContent</td><td class="str">'preload'</td><td>Adding this class to the link (<a>) tells the script to preload the external content for this tooltip. This only works for regular tooltips and not preview or screenshot tooltips - they have their tooltip image automatically preloaded.</td></tr>
<tr><td>sticky</td><td class="str">'.sticky'</td><td>Add this class to make a tooltip sticky. Only one tooltip on the screen at a time though.</td></tr>
<tr><td>events</td><td>See Events section below</td><td>Events that are triggered on the document when Jatt has initialized, the tooltip is about to be revealed, the tooltip has been revealed and when the tooltip is hidden.</td></tr>
<tr><td>tooltipId</td><td class="str">'tooltip'</td><td>The ID of the actual tooltip.</td></tr>
<tr><td>previewId</td><td class="str">'preview'</td><td>The ID of the actual preview/screenshot tooltip (the share the same one).</td></tr>
<tr>
<th colspan="3">Deprecated/Removed Options</th>
</tr>
<tr><td>live</td><td>false</td><td>Removed in v2.9; Jatt now uses jQuery v1.7+ delegated binding; so it will behave as if this "live" option were always true. <del>Set to true if you add tooltip objects to your page dynamically (added after the page is loaded)</del>.</td></tr>
</tbody>
</table>
</li>
</ul>
<h2>Events</h2>
<ul>
<li><span class="highlight-alert">*NOTE*</span> In version 2.9, the events triggered on the document were renamed!</li>
<li>Previous events were named "initialized", "beforeReveal", "revealed" and "hidden", with a ".jatt" namespace.</li>
<li>The "initialized", "beforeReveal", "revealed" and "hidden" callback function names <em>will also change</em> if you modify the named <code>events</code> settings; except, <em>the "jatt-" prefix will automatically be removed</em>!</li>
<li>Bind to individual events or all events as follows:</li>
</ul>
<blockquote class="pre">
<pre class="prettyprint lang-js">$(function(){
$(document).on('jatt-initialized jatt-beforeReveal jatt-reveal jatt-hidden', function(event, tooltip) {
var $tooltip = $(tooltip);
// ignore preview & screenshot tooltips
if ($tooltip.hasClass('tooltip')) {
// show HTML of tooltip
console.log($tooltip.html());
}
});
$.jatt({
events : {
init : 'jatt-initialized',
b4Reveal : 'jatt-beforeReveal',
reveal : 'jatt-reveal',
hidden : 'jatt-hidden'
},
});
});</pre>
</blockquote>
<h2>Known Issues</h2>
<ul>
<li>The tooltip script won't obtain cross-domain ajax requests by default, but I have included James Padolsey's <a href="http://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/">cross-domain ajax</a> script (jquery.xdomainajax.js) which should enable it. Just include the script in the head of your document.</li>
<li>If you find any other issues, please submit an issue to <a href="http://github.com/Mottie/Jatt/issues">Jatt's github repository</a>.</li>
</ul>
</div>
</body></html>