jquery-ui/demos/tooltip/custom-animation.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tooltip - Custom animation demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.5.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.tooltip.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#show-option" ).tooltip({
			show: {
				effect: "slideDown",
				delay: 250
			}
		});
		$( "#hide-option" ).tooltip({
			hide: {
				effect: "explode",
				delay: 250
			}
		});
		$( "#position-option" ).tooltip({
			position: {
				my: "left top",
				at: "left bottom+10",
				using: function( pos ) {
					$( this ).css({
						left: pos.left,
						top: pos.top - 10
					}).animate({ top: pos.top }, "fast" );
				}
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>There are various ways to customize the animation of a tooltip.</p>
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="show effect">show</a> and
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="hide effect">hide</a> options.</p>
<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="position option">position option</a>.</p>

</div><!-- End demo -->


<div class="demo-description">
<p>This demo shows how to customize animations. The tooltip is shown, after a
delay of 250ms, using a slide down animation, and hidden, after another delay,
without an animation.</p>
</div><!-- End demo-description -->

</body>
</html>
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
Tooltip demos: Cleanup. 2011-05-28 00:52:13 +00:00			`<meta charset="utf-8">`
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00			`<title>jQuery UI Tooltip - Custom animation demo</title>`
Tooltip demos: Cleanup. 2011-05-28 00:52:13 +00:00			`<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">`
			`<script src="../../jquery-1.5.1.js"></script>`
			`<script src="../../ui/jquery.ui.core.js"></script>`
			`<script src="../../ui/jquery.ui.widget.js"></script>`
			`<script src="../../ui/jquery.ui.position.js"></script>`
			`<script src="../../ui/jquery.ui.tooltip.js"></script>`
Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. 2011-05-28 14:18:39 +00:00			`<script src="../../ui/jquery.effects.core.js"></script>`
			`<script src="../../ui/jquery.effects.explode.js"></script>`
Tooltip demos: Cleanup. 2011-05-28 00:52:13 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<script>`
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00			`$(function() {`
Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. 2011-05-28 14:18:39 +00:00			`$( "#show-option" ).tooltip({`
Custom tooltip animations based on widget-animations branch. 2011-04-15 14:49:29 +00:00			`show: {`
Tooltip: Add support for delaying showing/hiding. Still need to figure out how to combine that with non-animated show/hide. 2011-04-21 12:30:42 +00:00			`effect: "slideDown",`
			`delay: 250`
Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. 2011-05-28 14:18:39 +00:00			`}`
			`});`
			`$( "#hide-option" ).tooltip({`
Custom tooltip animations based on widget-animations branch. 2011-04-15 14:49:29 +00:00			`hide: {`
Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. 2011-05-28 14:18:39 +00:00			`effect: "explode",`
Tooltip: Overhaul widget animations code to allow delay with plain show/hide 2011-05-02 11:11:58 +00:00			`delay: 250`
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00			`}`
			`});`
Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. 2011-05-28 14:18:39 +00:00			`$( "#position-option" ).tooltip({`
			`position: {`
			`my: "left top",`
			`at: "left bottom+10",`
			`using: function( pos ) {`
			`$( this ).css({`
			`left: pos.left,`
			`top: pos.top - 10`
			`}).animate({ top: pos.top }, "fast" );`
			`}`
			`}`
			`});`
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

			`<div class="demo">`

Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. 2011-05-28 14:18:39 +00:00			`<p>There are various ways to customize the animation of a tooltip.</p>`
			`<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="show effect">show</a> and`
			`<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="hide effect">hide</a> options.</p>`
			`<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="position option">position option</a>.</p>`
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00
			`</div><!-- End demo -->`



			`<div class="demo-description">`
Tooltip: Overhaul widget animations code to allow delay with plain show/hide 2011-05-02 11:11:58 +00:00			`<p>This demo shows how to customize animations. The tooltip is shown, after a`
			`delay of 250ms, using a slide down animation, and hidden, after another delay,`
			`without an animation.</p>`
Tooltip: Added demo for custom animations 2010-10-26 12:47:31 +00:00			`</div><!-- End demo-description -->`

			`</body>`
			`</html>`