Click here to Skip to main content
Click here to Skip to main content

Jquery Tooltip in ASP.NET MVC

, 14 Jan 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
This tip shows how to implement a jQuery tooltip in your ASP.NET application.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mishra Sourabh
Software Developer
India India
Sourabh Mishra is an IT geek, Developer, Trainer and Animator. He is a Microsoft guy, He is very passionate about Microsoft technologies and a true .Net Warrior. Sourabh started his career, when he was just 15 year old. He loves computer from his childhood.
His programming experience includes C/C++, Asp.Net, C#, Vb.net, WCF, Sqlserver, Entity Framework, MVC and Jquery.
 
Sourabh is awarded by Most Valuable Professional Status. He is always ready to learn new technologies, sharing his knowledge to several online community forums. He loves Bond movies.

Comments and Discussions

 
QuestionRE: Not MVC PinmemberJas Fowler16-Apr-14 4:12 
AnswerRe: RE: Not MVC PinmemberMishra Sourabh17-Apr-14 0:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 14 Jan 2014
Article Copyright 2014 by Mishra Sourabh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid