corrade-http-templates – Blame information for rev 57

Subversion Repositories:
Rev:
Rev Author Line No. Line
57 office 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>jQuery UI Tooltip - Custom animation demo</title>
7 <link rel="stylesheet" href="../../themes/base/all.css">
8 <link rel="stylesheet" href="../demos.css">
9 <script src="../../external/requirejs/require.js"></script>
10 <script src="../bootstrap.js" data-modules="effect effect-explode">
11 $( "#show-option" ).tooltip({
12 show: {
13 effect: "slideDown",
14 delay: 250
15 }
16 });
17 $( "#hide-option" ).tooltip({
18 hide: {
19 effect: "explode",
20 delay: 250
21 }
22 });
23 $( "#open-event" ).tooltip({
24 show: null,
25 position: {
26 my: "left top",
27 at: "left bottom"
28 },
29 open: function( event, ui ) {
30 ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
31 }
32 });
33 </script>
34 </head>
35 <body>
36  
37 <p>There are various ways to customize the animation of a tooltip.</p>
38 <p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
39 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
40 <p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
41  
42 <div class="demo-description">
43 <p>This demo shows how to customize animations using the show and hide options,
44 as well as the open event.</p>
45 </div>
46 </body>
47 </html>