Form with jQuery Tooltip in MVC3 Razor

Home » jQuery Tooltip » Form with jQuery Tooltip in MVC3 Razor

Form with jQuery Tooltip in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery Tooltip

In this article we will create a form and will use jQuery Tooltip for form fields to display additional information.
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 :

View :

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<fieldset style="width:300px;">
<legend>Employee Information</legend>
<form>
<table>
<tr>
<td>
<label for="FirstName">FirstName</label>
</td>
<td><input type="text" id="FirstName" title="Enter your FirstName Here !! First name should be less than 50 letters." /></td>
</tr>
<tr>
<td>
<label for="LastName">LastName</label>
</td>
<td><input type="text" id="LastName" title="Enter your LastName Here !! Last name should be less than 50 letters." /></td>
</tr>
<tr>
<td>
<label for="Designation">Designation</label>
</td>
<td><input type="text" id="Designation" title="Enter your Designation" /></td>
</tr>
<tr>
<td>
<label for="City">City</label>
</td>
<td><input type="text" id="City" title="Enter your City." /></td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" title="Submits the form" />
</td>
<td><input type="reset" value="Reset" title="Resets the form" /></td>
</tr>
</table>
</form>
</fieldset>


<script type="text/javascript">
    $(function () {
        $(document).tooltip();
    });
</script>

In the above view, we have referenced the layout file. The Layout file has references of all script files needed to render jQuery tooltip. We have created a simple form having some fields. We have rendered the form inside Fieldset element. We have set the title attribute of all the fields. In the script section we have used document selector and applied tooltip to it. When the element having title attribute set to some text is hovered, the text is shown in tooltip window. Thus we can supply additional information about fields and form using jQuery tooltip easily.

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>
</head>

<body>
    @RenderBody()
</body>
</html>

The above is the layout file. It has references of script files required to use jQuery tooltip. This layout is referenced in View where we want to use jQuery tooltip.

Demo :

In the above demo, on hovering the textboxes tootip is displayed which describes the textbox. We can also use the tab key. In the demo we have used document selector. When any element having title attribute set is hovered, the tooltip is displayed for that element showing text of title attribute.

Thus we can use jQuery tooltip to decorate and to make our form more interactive and interesting.