Custom animation and mouse track with jQuery Tooltip in MVC3 Razor
- In this article we will see how to use animation effects with jQuery tooltip and how to achieve mouse track in jQuery tooltip.
- Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
- Tooltips are also useful for form elements, to show some additional information in the context of each field.
- The default tooltip shown in different browser limits the number of characters to display, like IE7 shows only 572 characters as default tooltip. Using this jQuery tooltip we can display any number of characters.
- We have integrated this tooltip with MVC3 Razor application.
Following are the steps :
We will see how to achieve animation with tooltip first and then will move to mouse track.
Animation :
View :
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>This is demo for jQuery tooltip. Hover the show link. <a id="show" href="#" title="This is slideDown effect.">show</a></p>
<p>This is demo for jQuery tooltip. Hover the hide link. <a id="hide" href="#" title="On mouse out the tooltip will disappear with explode effect.">hide</a></p>
<p>This is demo for jQuery tooltip. Hover the open link. <a id="open" href="#" title="Tooltip will give effect of opening.">open</a></p>
<script type="text/javascript">
$(function () {
$("#show").tooltip({
show: {
effect: "slideDown",
delay: 500
}
});
$("#hide").tooltip({
hide: {
effect: "explode",
delay: 500
}
});
$("#open").tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function (event, ui) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 20 }, "slow");
}
});
});
</script>
In the above view, we have referred the Layout.cshtml which has references of script files needed for jQuery tooltip and animation effects. We have used slidedown, explode effects.
Layout :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.tooltip.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.effect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.effect-explode.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
We have referenced the script filed required for jQuery tooltip and animation. This layout file is reffered in the View.
Demo :
In the above demo, we have set the title attribute of anchor tags. On hovering the links, the tooltip is displayed with animation.
Mouse Track :
View :
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p title="jQuery Tooltip is amazing !!">This is example for jQuery tooltip. The tooltip will follow the mouse as you move along the paragraph element.</p>
<script type="text/javascript">
$(function () {
$("p").tooltip({
track: true
})
});
</script>
In the view we have created one paragraph element. We have set the track attribute to true in order to make the mouse track work for jQuery tooltip.
Layout :
We can use the same layout as above mentioned for animation.
Demo :
Hover the text.
In the above demo, we have created a paragraph element and used the track attribute of jQuery tooltip to achieve mouse track.
Thus by following the above steps we can achieve both animation and mouse track in jQuery tooltip in MVC3 Razor.
