<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="span1"></div>
<div class="row">
<h2>Tooltip Animation Playground</h2>
<p>Hover over an animation to see that animation in action</p>
<hr>
<div class="effects" style="margin-left: 75px">
<h2>fade:in</h2>
<h2>zoom:in</h2>
<h2>expand:vertical</h2>
<h2>expand:horizontal</h2>
<h2>slideIn:up</h2>
<h2>slideIn:down</h2>
<h2>slideIn:left</h2>
<h2>slideIn:right</h2>
<p>This last one is a combination effect of zoom and slide. I like it.</p>
<h2>zoom:in slideIn:right</h2>
</div>
</div>
</div>
<script>
$("h2").each(function() {
$(this).kendoTooltip({
content: "<h4>Hallo!</h4>",
position: "left",
animation: {
open: {
effects: $(this).text(),
duration: 200
},
close: {
effects: $(this).text(),
reverse: true,
duration: 200
}
}
});
});
</script>
</body>
</html>