Jquery Tooltip in ASP.NET MVC

Introduction

Every control has its tooltip property, but sometimes, we need some special CSS based or whenever we hover the mouse tooltip track kind of functionality. For this kind of feature, we have jquery tootip. Jquery tooltip is the part of jquery UI. In this tip, I am going to show you how you can implement jquery tooltip into your ASP.NET application.

So let’s start implementation of tooltip in our website.

• Open Visual Studio
• "File" -> "New" -> "Project..."
• Choose Visual C#- Web - Select ASP.NET MVC4 Web Application
• Add a new Internet Application > Click OK

Using the Code

Step 1: Create a new ActionResult method in Controller

HomeController.cs

    public ActionResult ToolTipDemo()
         {
         return View();
         }

Step 2: Right click in this method area and click on Add View, click Add.

TooTipDemo.cshtml

    <link rel="stylesheet" 
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style type="text/css">
    .ui-tooltip {
    font-size: small;
    font-family: Arial;
    }
    </style>

    @{
    ViewBag.Title = "ToolTipDemo";
    }
    <h2>ToolTipDemo</h2>
    <style>
    label {
    display: inline-block;
    width: 5em;
    }
    </style>
    <script>
    $(document).ready(function () {
    $(document).tooltip({
    track: true
    });
    });
    </script>
    <table>
    <tr>
    <td>
    Name
    </td>
    <td>
    <input type="text" id="txtName" title="Your Full Name Please."
    </td>
    </tr>
    <tr>
    <td>
    Phone
    </td>
    <td>
    <input type="text" id="txtPhone" 
    title="Your phone no. (+CountryCode)-(Std Code)-(Phone no.)."
    </td>
    </tr>
    <tr>
    <td>
    Age
    </td>
    <td>
    <input type="text" id="txtAge" title="Fill your age."
    </td>
    </tr>
    <tr>
    <td>
    Date of Birth
    </td>
    <td>
    <input type="text" id="txtDob" title="Fill DOB in MM/dd/yyyy Format"
    </td>
    </tr>
    </table>

That’s it. Press F5, run your code.

Understanding the Code

As I said earlier, jquery tooltip is the part of jquery UI, so here we add these files link.

    <link rel="stylesheet" 
    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

For Jquery UI, we need these files.

Now look at the below code:

    <script>

   $(document).ready(function () {

    $(document).tooltip({
    track: true
    });
    });

    </script> 

We use here $(document).tooltip({ when we write like this, automatically jquery tooltip will start in all of the controls where we use title property(<input type=”text” id=”txtName” title=”Fill your Name”). Here, I use another property under the tooltip section is track: true. I hope you say, what is this. When you run this program and hover your mouse in the area of your textboxes, your tooltip track with your mouse pointer.

track: true is using for that kind of stuff, if you don’t want to use this kind of functionality, you can remove this line.

    $(document).tooltip({

    });

Sometimes, we need this kind of features not for all controls. For example, you just want this kind of feature only for your txtDob textbox control. So just write:

    <script>
    $(document).ready(function () {
       $(‘#txtDob’).tooltip({
          track: true
       });
    });
  
    </script>

Now when you run the program, you can only see jquery tooltip into your txtDob textbox.

That’s it. Happy programming.