amithegde/jquery-ui-tooltip-with-user-interation.htm

## jquery-ui-tooltip-with-user-interation.htm
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
		$( '.tooltip' ).tooltip({
			open: function(){
				// make sure all other tooltips are closed when opening a new one
			$('.tooltip').not(this).tooltip('close');
			}
		}).on('mouseleave', function(e){
			var that = this;

			// close the tooltip later (maybe ...)
			mouseLeaveTimer = setTimeout(function(){
				$(that).tooltip('close');
			}, 100);

			// prevent tooltip widget to close the tooltip now
			e.stopImmediatePropagation();
		});

		$(document).on('mouseenter', '.ui-tooltip', function(e){
			// cancel tooltip closing on hover
			clearTimeout(mouseLeaveTimer);
		});

		$(document).on('mouseleave', '.ui-tooltip', function(){
			// make sure tooltip is closed when the mouse is gone
			$('.tooltip').tooltip('close');
		});
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
<input id="age" class="tooltip" title="We ask for your age only for statistical purposes.">
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>jQuery UI Tooltip - Default functionality</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css">
	<script>
	$(function() {
	$( '.tooltip' ).tooltip({
	open: function(){
	// make sure all other tooltips are closed when opening a new one
	$('.tooltip').not(this).tooltip('close');
	}
	}).on('mouseleave', function(e){
	var that = this;

	// close the tooltip later (maybe ...)
	mouseLeaveTimer = setTimeout(function(){
	$(that).tooltip('close');
	}, 100);

	// prevent tooltip widget to close the tooltip now
	e.stopImmediatePropagation();
	});

	$(document).on('mouseenter', '.ui-tooltip', function(e){
	// cancel tooltip closing on hover
	clearTimeout(mouseLeaveTimer);
	});

	$(document).on('mouseleave', '.ui-tooltip', function(){
	// make sure tooltip is closed when the mouse is gone
	$('.tooltip').tooltip('close');
	});
	});
	</script>
	<style>
	label {
	display: inline-block;
	width: 5em;
	}
	</style>
	</head>
	<body>
	<input id="age" class="tooltip" title="We ask for your age only for statistical purposes.">
	</body>
	</html>