jQuery UI Tooltip With Web API

Introduction

In this article I will tell you how to use the jQuery UI Tooltip with the Web API. Tooltip is a small pop-up window with a text message. It works when the cursor moves to an element such as a TextBox, Button and so on. In this article you will see that when you move the cursor to the text box it display a Tooltip. A Tooltip is also used in Graphical User Interfaces to help explain controls.

The following is the procedure for creating the application.

1. Create a Web API application.

• Start Visual Studio 2012.
• From the start window select "New Project".
• From the new project window select "Installed" -> "Visual C#" -> "Web".
• Select "ASP.NET MVC4 Web Application" and click the "OK" button.

• From the "MVC4 Project" window select "Web API".

• Click the "OK" button.

2. Open the "index.cshtml" file for writing the code of the Tooltip. This file exists:

• In the "Solution Explorer".
• Expand the "views" folder.
• Select "Home" -> "Index.cshtml"

Add the following code:

@{

    ViewBag.Title = "Index";

}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script>

    $(document).ready(function () {

        $("#name").tooltip({ track: true });

        $("#address").tooltip({ track: true });

    });

</script>

<h4>

   

jQuery UI Tooltip With Web APIr</h4>

&nbsp;&nbsp; Name :@Html.TextBox("Name","", new { @title = "Enter Your name.", @id = "name" })<br /><br />

Address :@Html.TextBox("Adress","", new { @title = " Enter your address.", @id = "address" })

 

 

The following code displays the Tooltip:

$(document).ready(function () {

        $("#name").tooltip({ track: true });

        $("#address").tooltip({ track: true });

    });

3. Execute the application by pressing "F5". The output looks like this:

   
   

Move the cursor to the nametextbox. It display a Tooltip with the text message.

Now after entering the name move the TextBox to the Address TextBox then it displays a Tooltip.