← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/overlay/overlay-tooltip.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/overlay/overlay-tooltip.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Simple Tooltip</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Simple Tooltip</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style type="text/css" scoped>
23
 
/* Hide overlay markup while loading, if js is enabled */
24
 
.yui3-js-enabled .yui3-overlay-loading {
25
 
    top:-1000em;
26
 
    left:-1000em;
27
 
    position:absolute;
28
 
}
29
 
 
30
 
 
31
 
/* Example Layout CSS */
32
 
 
33
 
 
34
 
</style>
35
 
 
36
 
<div class="intro">    
37
 
    <p>This example demonstrates a lightweight and flexible setup for display
38
 
    of tooltips.</p>
39
 
    <p>This displays the tooltip adjacent to the cursor
40
 
    and takes advantage of the shim capabilities of <code>Overlay</code>,
41
 
    allowing the tooltip to properly display over <code>select</code> elements in IE.</p>
42
 
</div>
43
 
 
44
 
<div class="example">
45
 
    <style>
46
 
    .example {
47
 
        text-align: center;
48
 
    }
49
 
 
50
 
    .example .lists {
51
 
        margin: 10px auto;  /*center in viewport*/
52
 
    }
53
 
 
54
 
    .example .list {
55
 
        -moz-padding-start: 0;
56
 
        -webkit-padding-start: 0;
57
 
        width: 300px;
58
 
        margin: 0;
59
 
    }
60
 
 
61
 
    .example #tooltip .yui3-widget-bd{
62
 
        text-align: left;
63
 
        max-width: 15em;
64
 
        *width: 10em;
65
 
        background-color: #FFF6D5;
66
 
        border: solid 1px #aa8;
67
 
        padding: 0.2em 0.5em 0.3em;
68
 
        -moz-border-radius: 2px;
69
 
        -webkit-border-radius: 2px;
70
 
        -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
71
 
        -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
72
 
    }
73
 
 
74
 
    .example .list li{
75
 
        list-style: none;
76
 
        margin: 0 0 20px;
77
 
        border: 1px solid #C9C9C9;
78
 
        width: 300px;
79
 
    }
80
 
 
81
 
    .example .list img{
82
 
        vertical-align: bottom;
83
 
    }
84
 
 
85
 
    .example .list .select{
86
 
        padding: 1.5em 0 0.5em;
87
 
        text-indent: 0.5em;
88
 
        background-color: #F7DBB2;
89
 
    }
90
 
 
91
 
</style>
92
 
 
93
 
<body>
94
 
    <div id="tooltip"></div>
95
 
    
96
 
    <div class="yui3-g lists">
97
 
        <div class="yui3-u-1-2"> <!-- see CSS Grids -->
98
 
            <ul class="list">
99
 
                <li class="wrench"><img src="../assets/overlay/img/wrench.png"></li>
100
 
                <li class="calipers"><img src="../assets/overlay/img/calipers.png"/></li>
101
 
                <li class="drill"><img src="../assets/overlay/img/drill.png"/></li>
102
 
                <li class="ohm"><img src="../assets/overlay/img/ohm.png"/></li>
103
 
                <li class="level"><img src="../assets/overlay/img/level.png"/></li>
104
 
            </ul>
105
 
        </div>
106
 
        <div class="yui3-u">
107
 
            <ul class="list">
108
 
                <li class="endwrench"><img src="../assets/overlay/img/endwrench.png"/></li>
109
 
                <li class="knife"><img src="../assets/overlay/img/knife.png"/></li>
110
 
                <li class="scissors"><img src="../assets/overlay/img/scissors.png"/></li>
111
 
                <li class="screwdriver"><img src="../assets/overlay/img/screwdriver.png"/></li>
112
 
                <li class="tape"><img src="../assets/overlay/img/tape.png"/></li>
113
 
                <li class="select">Tooltips cover <select><option>select</option></select> elements in IE.</li>
114
 
            </ul>
115
 
        </div>
116
 
    </div>
117
 
 
118
 
<script>
119
 
YUI().use('overlay', 'event', 'widget-anim', function (Y) {
120
 
 
121
 
    var waitingToShow = false,
122
 
        
123
 
        // array for text to be displayed in tooltips
124
 
        tipText = [
125
 
            {'name': 'wrench', 'text': "Avoid dropping on toe."},
126
 
            {'name': 'calipers', 'text': 'Dial calipers: +- .001,<br>human hair .004'},
127
 
            {'name': 'drill', 'text': 'Variable-speed and cordless too.'},
128
 
            {'name': 'ohm', 'text': 'Never test microwaves with a volt-ohm meter.'},
129
 
            {'name': 'level', 'text': 'Unreliable in zero gravity conditions.'},
130
 
            {'name': 'endwrench', 'text': '11/16 box-end wrench A.K.A spanner - (British)'},
131
 
            {'name': 'knife', 'text': 'Wants to roll off table and stick in foot.'},
132
 
            {'name': 'scissors', 'text': "Don't run with these."},
133
 
            {'name': 'screwdriver', 'text': 'Not intended for garden weeding.'},
134
 
            {'name': 'tape', 'text': 'Remove before cutting.'},
135
 
            {'name': 'select', 'text': 'Covering select'}
136
 
        ];
137
 
 
138
 
    var tooltip = new Y.Overlay({
139
 
        srcNode: "#tooltip",
140
 
        visible: false
141
 
    }).plug(Y.Plugin.WidgetAnim);
142
 
    tooltip.anim.get('animHide').set('duration', 0.01);
143
 
    tooltip.anim.get('animShow').set('duration', 0.3);
144
 
    tooltip.render();
145
 
 
146
 
    // handler that positions and shows the tooltip 
147
 
    var onMousemove = function (e) {
148
 
        var i;
149
 
        if (tooltip.get('visible') === false) {
150
 
            // while it's still hidden, move the tooltip adjacent to the cursor
151
 
            Y.one('#tooltip').setStyle('opacity', '0');
152
 
            tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
153
 
        }
154
 
        if (waitingToShow === false) {
155
 
            // wait half a second, then show tooltip
156
 
            setTimeout(function(){
157
 
                Y.one('#tooltip').setStyle('opacity', '1');
158
 
                tooltip.show();
159
 
            }, 500);
160
 
            
161
 
            // while waiting to show tooltip, don't let other
162
 
            // mousemoves try to show tooltip too.
163
 
            waitingToShow = true;
164
 
            
165
 
            // loop through the tipText array looking for a match between
166
 
            // the class name and the array literal <code>name</code>
167
 
            for (i = 0; i < tipText.length; i += 1) {
168
 
                if (e.currentTarget.hasClass(tipText[i].name)) {
169
 
 
170
 
                    // found a match, so set the content in the tooltip's body
171
 
                    tooltip.setStdModContent('body', tipText[i].text);
172
 
                    break;
173
 
                }
174
 
            }
175
 
        }
176
 
    }
177
 
 
178
 
    // handler that hides the tooltip
179
 
    var onMouseleave = function (e) {
180
 
 
181
 
        // this check prevents hiding the tooltip 
182
 
        // when the cursor moves over the tooltip itself
183
 
        if ((e.relatedTarget) && (e.relatedTarget.hasClass('yui3-widget-bd') === false)) {
184
 
            tooltip.hide();
185
 
            waitingToShow = false;            
186
 
        }
187
 
    }
188
 
 
189
 
    Y.delegate('mousemove', onMousemove, '.lists', 'li');
190
 
    Y.delegate('mouseleave', onMouseleave, '.lists', 'li');
191
 
    Y.one('#tooltip').on('mouseleave', onMouseleave);
192
 
 
193
 
});
194
 
</script>
195
 
</body>
196
 
</div>
197
 
 
198
 
<h2>Simple Tooltips</h2>
199
 
 
200
 
 
201
 
 
202
 
<h3>The Tooltip Markup</h3>
203
 
 
204
 
<p>We just need a <code>div</code> for the tooltip, and some elements that want to
205
 
have tooltips.</p>
206
 
 
207
 
<pre class="code prettyprint">&lt;div id=&quot;tooltip&quot;&gt;&lt;&#x2F;div&gt;
208
 
 
209
 
&lt;ul class=&quot;list&quot;&gt;
210
 
    &lt;li class=&quot;wrench&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;wrench.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
211
 
    &lt;li class=&quot;calipers&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;calipers.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
212
 
    &lt;li class=&quot;drill&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;drill.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
213
 
    &lt;li class=&quot;ohm&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;ohm.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
214
 
    &lt;li class=&quot;level&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;level.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
215
 
&lt;&#x2F;ul&gt;</pre>
216
 
 
217
 
 
218
 
<h3>Setting Up the YUI Instance</h3>
219
 
 
220
 
<p>We'll use the <code>Overlay</code> module to provide shimming for correctly covering
221
 
<code>&lt;select&gt;</code> elements in IE. We'll use <code>Event</code> for its <code>onmouseleave</code> event, and
222
 
<code>widget-anim</code> as a plugin to provide the fade-in for the tooltip.  
223
 
</p>
224
 
 
225
 
<pre class="code prettyprint">YUI().use(&#x27;overlay&#x27;, &#x27;event&#x27;, &#x27;widget-anim&#x27;, function (Y) {
226
 
    &#x2F;&#x2F; code will go here.
227
 
});</pre>
228
 
 
229
 
<h3>Declare some variables</h3>
230
 
 
231
 
<p>These variables include an array of strings for various tooltips.
232
 
If a DOM element has a class matching one of the <code>name</code> values in the <code>tipText</code> array, 
233
 
it will display the corresponding text value in its tooltip when the cursor moves
234
 
over it.
235
 
</p>
236
 
 
237
 
<pre class="code prettyprint">var waitingToShow = false,
238
 
    
239
 
    &#x2F;&#x2F; array for text to be displayed in tooltips
240
 
    tipText = [
241
 
        {&#x27;name&#x27;: &#x27;wrench&#x27;, &#x27;text&#x27;: &quot;Avoid dropping on toe.&quot;},
242
 
        {&#x27;name&#x27;: &#x27;calipers&#x27;, &#x27;text&#x27;: &#x27;Dial calipers: +- .001,&lt;br&gt;human hair .004&#x27;},
243
 
        {&#x27;name&#x27;: &#x27;drill&#x27;, &#x27;text&#x27;: &#x27;Variable-speed and cordless too.&#x27;},
244
 
        {&#x27;name&#x27;: &#x27;ohm&#x27;, &#x27;text&#x27;: &#x27;Never test microwaves with a volt-ohm meter.&#x27;},
245
 
        {&#x27;name&#x27;: &#x27;level&#x27;, &#x27;text&#x27;: &#x27;Unreliable in zero gravity conditions.&#x27;}
246
 
        &#x2F;&#x2F; the array continues...
247
 
    ];</pre>
248
 
 
249
 
 
250
 
<h3>Instantiating The Tooltip</h3>
251
 
 
252
 
<p>To create an overlay instance for the tooltip, 
253
 
we use the overlay constructor <code>Y.Overlay</code>, specifying the source node
254
 
as the selector of the tooltip element.
255
 
</p>
256
 
 
257
 
<pre class="code prettyprint">var tooltip = new Y.Overlay({
258
 
    srcNode: &quot;#tooltip&quot;,
259
 
    visible: false
260
 
}).plug(Y.Plugin.WidgetAnim);
261
 
tooltip.anim.get(&#x27;animHide&#x27;).set(&#x27;duration&#x27;, 0.01);
262
 
tooltip.anim.get(&#x27;animShow&#x27;).set(&#x27;duration&#x27;, 0.3);
263
 
tooltip.render();</pre>
264
 
 
265
 
 
266
 
<h3>Event Handlers</h3>
267
 
 
268
 
<p>
269
 
Create event handlers for the mouse events 
270
 
and place them above the listeners code.
271
 
</p>
272
 
<pre class="code prettyprint">&#x2F;&#x2F; handler that positions and shows the tooltip 
273
 
var onMousemove = function (e) {
274
 
    var i;
275
 
    if (tooltip.get(&#x27;visible&#x27;) === false) {
276
 
        &#x2F;&#x2F; while it&#x27;s still hidden, move the tooltip adjacent to the cursor
277
 
        Y.one(&#x27;#tooltip&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;0&#x27;);
278
 
        tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
279
 
    }
280
 
    if (waitingToShow === false) {
281
 
        &#x2F;&#x2F; wait half a second, then show tooltip
282
 
        setTimeout(function(){
283
 
            Y.one(&#x27;#tooltip&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;1&#x27;);
284
 
            tooltip.show();
285
 
        }, 500);
286
 
        
287
 
        &#x2F;&#x2F; while waiting to show tooltip, don&#x27;t let other
288
 
        &#x2F;&#x2F; mousemoves try to show tooltip too.
289
 
        waitingToShow = true;
290
 
        
291
 
        &#x2F;&#x2F; loop through the tipText array looking for a match between
292
 
        &#x2F;&#x2F; the class name and the array literal &#x60;name&#x60;
293
 
        for (i = 0; i &lt; tipText.length; i += 1) {
294
 
            if (e.currentTarget.hasClass(tipText[i].name)) {
295
 
 
296
 
                &#x2F;&#x2F; found a match, so set the content in the tooltip&#x27;s body
297
 
                tooltip.setStdModContent(&#x27;body&#x27;, tipText[i].text);
298
 
                break;
299
 
            }
300
 
        }
301
 
    }
302
 
}
303
 
 
304
 
&#x2F;&#x2F; handler that hides the tooltip
305
 
var onMouseleave = function (e) {
306
 
 
307
 
    &#x2F;&#x2F; this check prevents hiding the tooltip 
308
 
    &#x2F;&#x2F; when the cursor moves over the tooltip itself
309
 
    if ((e.relatedTarget) &amp;&amp; (e.relatedTarget.hasClass(&#x27;yui3-widget-bd&#x27;) === false)) {
310
 
        tooltip.hide();
311
 
        waitingToShow = false;            
312
 
    }
313
 
}</pre>
314
 
 
315
 
 
316
 
 
317
 
<h3>Event Listeners</h3>
318
 
 
319
 
<p>
320
 
Add listeners for <code>mousemove</code> and <code>mouseout</code> events 
321
 
to whatever elements you want to have tooltips.
322
 
Using <code>mousemove</code> instead of <code>mouseover</code>, and using a <code>delay</code> in the <code>transition</code>
323
 
makes the tooltip fade in adjacent to the cursor.
324
 
See <a href="../event/index.html#delegation">event delegation</a> for efficient
325
 
event subscribing to multiple elements.
326
 
</p>
327
 
 
328
 
<pre class="code prettyprint">Y.delegate(&#x27;mousemove&#x27;, onMousemove, &#x27;.lists&#x27;, &#x27;li&#x27;);
329
 
Y.delegate(&#x27;mouseleave&#x27;, onMouseleave, &#x27;.lists&#x27;, &#x27;li&#x27;);
330
 
Y.one(&#x27;#tooltip&#x27;).on(&#x27;mouseleave&#x27;, onMouseleave);</pre>
331
 
 
332
 
<p>
333
 
This example demonstrates how you can use the existing Overlay component
334
 
to create a one-off Tooltip for your page.
335
 
If you plan to re-use the Tooltip on multiple pages,
336
 
or in a variety of use cases, it's a good idea to encapsulate
337
 
all the code which makes a tooltip work into a reusable Widget class.
338
 
The example,
339
 
<a href="../widget/widget-tooltip.html">Creating a Simple Tooltip Widget with Extensions</a>,
340
 
shows how you can create a reusable, flexible Tooltip class.
341
 
</p>
342
 
 
343
 
<h3>Complete Example Source</h3>
344
 
<pre class="code prettyprint">&lt;style&gt;
345
 
    .example {
346
 
        text-align: center;
347
 
    }
348
 
 
349
 
    .example .lists {
350
 
        margin: 10px auto;  &#x2F;*center in viewport*&#x2F;
351
 
    }
352
 
 
353
 
    .example .list {
354
 
        -moz-padding-start: 0;
355
 
        -webkit-padding-start: 0;
356
 
        width: 300px;
357
 
        margin: 0;
358
 
    }
359
 
 
360
 
    .example #tooltip .yui3-widget-bd{
361
 
        text-align: left;
362
 
        max-width: 15em;
363
 
        *width: 10em;
364
 
        background-color: #FFF6D5;
365
 
        border: solid 1px #aa8;
366
 
        padding: 0.2em 0.5em 0.3em;
367
 
        -moz-border-radius: 2px;
368
 
        -webkit-border-radius: 2px;
369
 
        -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
370
 
        -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
371
 
    }
372
 
 
373
 
    .example .list li{
374
 
        list-style: none;
375
 
        margin: 0 0 20px;
376
 
        border: 1px solid #C9C9C9;
377
 
        width: 300px;
378
 
    }
379
 
 
380
 
    .example .list img{
381
 
        vertical-align: bottom;
382
 
    }
383
 
 
384
 
    .example .list .select{
385
 
        padding: 1.5em 0 0.5em;
386
 
        text-indent: 0.5em;
387
 
        background-color: #F7DBB2;
388
 
    }
389
 
 
390
 
&lt;&#x2F;style&gt;
391
 
 
392
 
&lt;body&gt;
393
 
    &lt;div id=&quot;tooltip&quot;&gt;&lt;&#x2F;div&gt;
394
 
    
395
 
    &lt;div class=&quot;yui3-g lists&quot;&gt;
396
 
        &lt;div class=&quot;yui3-u-1-2&quot;&gt; &lt;!-- see CSS Grids --&gt;
397
 
            &lt;ul class=&quot;list&quot;&gt;
398
 
                &lt;li class=&quot;wrench&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;wrench.png&quot;&gt;&lt;&#x2F;li&gt;
399
 
                &lt;li class=&quot;calipers&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;calipers.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
400
 
                &lt;li class=&quot;drill&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;drill.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
401
 
                &lt;li class=&quot;ohm&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;ohm.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
402
 
                &lt;li class=&quot;level&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;level.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
403
 
            &lt;&#x2F;ul&gt;
404
 
        &lt;&#x2F;div&gt;
405
 
        &lt;div class=&quot;yui3-u&quot;&gt;
406
 
            &lt;ul class=&quot;list&quot;&gt;
407
 
                &lt;li class=&quot;endwrench&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;endwrench.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
408
 
                &lt;li class=&quot;knife&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;knife.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
409
 
                &lt;li class=&quot;scissors&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;scissors.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
410
 
                &lt;li class=&quot;screwdriver&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;screwdriver.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
411
 
                &lt;li class=&quot;tape&quot;&gt;&lt;img src=&quot;..&#x2F;assets&#x2F;overlay&#x2F;img&#x2F;tape.png&quot;&#x2F;&gt;&lt;&#x2F;li&gt;
412
 
                &lt;li class=&quot;select&quot;&gt;Tooltips cover &lt;select&gt;&lt;option&gt;select&lt;&#x2F;option&gt;&lt;&#x2F;select&gt; elements in IE.&lt;&#x2F;li&gt;
413
 
            &lt;&#x2F;ul&gt;
414
 
        &lt;&#x2F;div&gt;
415
 
    &lt;&#x2F;div&gt;
416
 
 
417
 
&lt;script&gt;
418
 
YUI().use(&#x27;overlay&#x27;, &#x27;event&#x27;, &#x27;widget-anim&#x27;, function (Y) {
419
 
 
420
 
    var waitingToShow = false,
421
 
        
422
 
        &#x2F;&#x2F; array for text to be displayed in tooltips
423
 
        tipText = [
424
 
            {&#x27;name&#x27;: &#x27;wrench&#x27;, &#x27;text&#x27;: &quot;Avoid dropping on toe.&quot;},
425
 
            {&#x27;name&#x27;: &#x27;calipers&#x27;, &#x27;text&#x27;: &#x27;Dial calipers: +- .001,&lt;br&gt;human hair .004&#x27;},
426
 
            {&#x27;name&#x27;: &#x27;drill&#x27;, &#x27;text&#x27;: &#x27;Variable-speed and cordless too.&#x27;},
427
 
            {&#x27;name&#x27;: &#x27;ohm&#x27;, &#x27;text&#x27;: &#x27;Never test microwaves with a volt-ohm meter.&#x27;},
428
 
            {&#x27;name&#x27;: &#x27;level&#x27;, &#x27;text&#x27;: &#x27;Unreliable in zero gravity conditions.&#x27;},
429
 
            {&#x27;name&#x27;: &#x27;endwrench&#x27;, &#x27;text&#x27;: &#x27;11&#x2F;16 box-end wrench A.K.A spanner - (British)&#x27;},
430
 
            {&#x27;name&#x27;: &#x27;knife&#x27;, &#x27;text&#x27;: &#x27;Wants to roll off table and stick in foot.&#x27;},
431
 
            {&#x27;name&#x27;: &#x27;scissors&#x27;, &#x27;text&#x27;: &quot;Don&#x27;t run with these.&quot;},
432
 
            {&#x27;name&#x27;: &#x27;screwdriver&#x27;, &#x27;text&#x27;: &#x27;Not intended for garden weeding.&#x27;},
433
 
            {&#x27;name&#x27;: &#x27;tape&#x27;, &#x27;text&#x27;: &#x27;Remove before cutting.&#x27;},
434
 
            {&#x27;name&#x27;: &#x27;select&#x27;, &#x27;text&#x27;: &#x27;Covering select&#x27;}
435
 
        ];
436
 
 
437
 
    var tooltip = new Y.Overlay({
438
 
        srcNode: &quot;#tooltip&quot;,
439
 
        visible: false
440
 
    }).plug(Y.Plugin.WidgetAnim);
441
 
    tooltip.anim.get(&#x27;animHide&#x27;).set(&#x27;duration&#x27;, 0.01);
442
 
    tooltip.anim.get(&#x27;animShow&#x27;).set(&#x27;duration&#x27;, 0.3);
443
 
    tooltip.render();
444
 
 
445
 
    &#x2F;&#x2F; handler that positions and shows the tooltip 
446
 
    var onMousemove = function (e) {
447
 
        var i;
448
 
        if (tooltip.get(&#x27;visible&#x27;) === false) {
449
 
            &#x2F;&#x2F; while it&#x27;s still hidden, move the tooltip adjacent to the cursor
450
 
            Y.one(&#x27;#tooltip&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;0&#x27;);
451
 
            tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
452
 
        }
453
 
        if (waitingToShow === false) {
454
 
            &#x2F;&#x2F; wait half a second, then show tooltip
455
 
            setTimeout(function(){
456
 
                Y.one(&#x27;#tooltip&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;1&#x27;);
457
 
                tooltip.show();
458
 
            }, 500);
459
 
            
460
 
            &#x2F;&#x2F; while waiting to show tooltip, don&#x27;t let other
461
 
            &#x2F;&#x2F; mousemoves try to show tooltip too.
462
 
            waitingToShow = true;
463
 
            
464
 
            &#x2F;&#x2F; loop through the tipText array looking for a match between
465
 
            &#x2F;&#x2F; the class name and the array literal &#x60;name&#x60;
466
 
            for (i = 0; i &lt; tipText.length; i += 1) {
467
 
                if (e.currentTarget.hasClass(tipText[i].name)) {
468
 
 
469
 
                    &#x2F;&#x2F; found a match, so set the content in the tooltip&#x27;s body
470
 
                    tooltip.setStdModContent(&#x27;body&#x27;, tipText[i].text);
471
 
                    break;
472
 
                }
473
 
            }
474
 
        }
475
 
    }
476
 
 
477
 
    &#x2F;&#x2F; handler that hides the tooltip
478
 
    var onMouseleave = function (e) {
479
 
 
480
 
        &#x2F;&#x2F; this check prevents hiding the tooltip 
481
 
        &#x2F;&#x2F; when the cursor moves over the tooltip itself
482
 
        if ((e.relatedTarget) &amp;&amp; (e.relatedTarget.hasClass(&#x27;yui3-widget-bd&#x27;) === false)) {
483
 
            tooltip.hide();
484
 
            waitingToShow = false;            
485
 
        }
486
 
    }
487
 
 
488
 
    Y.delegate(&#x27;mousemove&#x27;, onMousemove, &#x27;.lists&#x27;, &#x27;li&#x27;);
489
 
    Y.delegate(&#x27;mouseleave&#x27;, onMouseleave, &#x27;.lists&#x27;, &#x27;li&#x27;);
490
 
    Y.one(&#x27;#tooltip&#x27;).on(&#x27;mouseleave&#x27;, onMouseleave);
491
 
 
492
 
});
493
 
&lt;&#x2F;script&gt;
494
 
&lt;&#x2F;body&gt;</pre>
495
 
 
496
 
</div>
497
 
            </div>
498
 
        </div>
499
 
 
500
 
        <div class="yui3-u-1-4">
501
 
            <div class="sidebar">
502
 
                
503
 
 
504
 
                
505
 
                    <div class="sidebox">
506
 
                        <div class="hd">
507
 
                            <h2 class="no-toc">Examples</h2>
508
 
                        </div>
509
 
 
510
 
                        <div class="bd">
511
 
                            <ul class="examples">
512
 
                                
513
 
                                    
514
 
                                        <li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay&#x27;s basic XY positioning support.">
515
 
                                            <a href="overlay-xy.html">Basic XY Positioning</a>
516
 
                                        </li>
517
 
                                    
518
 
                                
519
 
                                    
520
 
                                        <li data-description="Shows how to create a simple tooltip incorporating the overlay shim feature.">
521
 
                                            <a href="overlay-tooltip.html">Simple Tooltip</a>
522
 
                                        </li>
523
 
                                    
524
 
                                
525
 
                                    
526
 
                                        <li data-description="Shows how to use the Overlay&#x27;s XY alignment support, to align the Overlay relative to another element, or to the viewport.">
527
 
                                            <a href="overlay-align.html">Alignment Support</a>
528
 
                                        </li>
529
 
                                    
530
 
                                
531
 
                                    
532
 
                                        <li data-description="Shows how to use the Overlay&#x27;s zindex and shim support when positioning Overlays above other elements on the page.">
533
 
                                            <a href="overlay-stack.html">Stack Support</a>
534
 
                                        </li>
535
 
                                    
536
 
                                
537
 
                                    
538
 
                                        <li data-description="Shows how to modify content in the Overlay&#x27;s header, body and footer sections.">
539
 
                                            <a href="overlay-stdmod.html">Standard Module Support</a>
540
 
                                        </li>
541
 
                                    
542
 
                                
543
 
                                    
544
 
                                        <li data-description="Shows how to use Overlay&#x27;s constrainment support, to limit the XY value which can be set for an Overlay.">
545
 
                                            <a href="overlay-constrain.html">Constrain Support</a>
546
 
                                        </li>
547
 
                                    
548
 
                                
549
 
                                    
550
 
                                        <li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
551
 
                                            <a href="overlay-io-plugin.html">IO Plugin</a>
552
 
                                        </li>
553
 
                                    
554
 
                                
555
 
                                    
556
 
                                        <li data-description="Shows how to create a simple plugin to animate the Overlay&#x27;s movement and visibility.">
557
 
                                            <a href="overlay-anim-plugin.html">Animation Plugin</a>
558
 
                                        </li>
559
 
                                    
560
 
                                
561
 
                                    
562
 
                                
563
 
                                    
564
 
                                
565
 
                            </ul>
566
 
                        </div>
567
 
                    </div>
568
 
                
569
 
 
570
 
                
571
 
                    <div class="sidebox">
572
 
                        <div class="hd">
573
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
574
 
                        </div>
575
 
 
576
 
                        <div class="bd">
577
 
                            <ul class="examples">
578
 
                                
579
 
                                    
580
 
                                
581
 
                                    
582
 
                                
583
 
                                    
584
 
                                
585
 
                                    
586
 
                                
587
 
                                    
588
 
                                
589
 
                                    
590
 
                                
591
 
                                    
592
 
                                
593
 
                                    
594
 
                                
595
 
                                    
596
 
                                        <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
597
 
                                            <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
598
 
                                        </li>
599
 
                                    
600
 
                                
601
 
                                    
602
 
                                        <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
603
 
                                            <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
604
 
                                        </li>
605
 
                                    
606
 
                                
607
 
                            </ul>
608
 
                        </div>
609
 
                    </div>
610
 
                
611
 
            </div>
612
 
        </div>
613
 
    </div>
614
 
</div>
615
 
 
616
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
617
 
<script>prettyPrint();</script>
618
 
 
619
 
</body>
620
 
</html>