JQuery
How to animate tooltip with time duration using jQuery?
By: Mohamed Rasik | May,17 2016 | JQueryWe can animate tooltip by showing and hiding using property show and hide. Here we are using JavaScript object to specify the property animation duration, effect and delays.
For more details,
http://api.jqueryui.com/tooltip/
Example:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtJobDesc').tooltip({
show: { delay: 10, duration: 1000, effect: 'slideDown' },
hide: { delay: 10, duration: 1000, effect: 'slideUp' },
track:true
});
});
</script>
</head>
<body>
<div>
<input id="txtJobDesc" type="text" title="write breif about previousjob description." />
</div>
</body>
</html>
Output:
