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.

      tool.jpg

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

      tool1.jpg

    • 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"
      tool2.jpg
      Add the following code:
      1. @{
      2. ViewBag.Title = "Index";
      3. }
      4. <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
      5. <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
      6. <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
      7. <script>
      8. $(document).ready(function () {
      9. $("#name").tooltip({ track: true });
      10. $("#address").tooltip({ track: true });
      11. });
      12. </script>
      13. <h4>jQuery UI Tooltip With Web APIr</h4>
      14. Name :@Html.TextBox("Name","", new { @title = "Enter Your name.", @id = "name" })<br /><br />
      15. Address :@Html.TextBox("Adress","", new { @title = " Enter your address.", @id = "address" })
      The following code displays the Tooltip:
      1. $(document).ready(function () {
      2. $("#name").tooltip({ track: true });
      3. $("#address").tooltip({ track: true });
      4. });

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

    tool3.jpg

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

    tool4.jpg

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

    tool5.jpg