ASP.NET MVC - jQuery Tooltip Plugin

This article is about the integration of jQuery Qtip plugin with ASP.NET MVC5 platform.

Tooltip information is an important user interactive component. In web development customization, highly interactive tooltips are used that contain links or images along with textual information. A very powerful yet simple jQuery plugin, Qtip, is available for displaying customize tooltips.
 
Today, I shall be demonstrating the process of integration of jQuery Qtip plugin with ASP.NET MVC5 platform.
 
ASP.NET MVC - jQuery Tooltip Plugin
 
Prerequisites
 
The following are some prerequisites before you proceed any further in this tutorial.
  1. Knowledge of ASP.NET MVC5.
  2. Knowledge of HTML.
  3. Knowledge of JavaScript.
  4. Knowledge of Bootstrap.
  5. Knowledge of Jquery.
  6. Knowledge of C# Programming.
The example code is being developed in Microsoft Visual Studio 2017 Professional. I am using 2017 public holidays for Pakistan in a ".txt" file as announced by the Pakistan Government.
 
 
Let's begin now.
 
Step 1
 
Create a new MVC web project and name it "MvcQtip".
 
Step 2
 
Now, create a controller file and name it "Controllers\HomeController.cs" and write a simple GetCalendarData(...) method which will first load the holiday data from the text file and then, will convert the loaded data into JSON format and finally, return the target JSON data.
  1. #region Getpublic holiday data method.  
  2.   
  3. /// <summary>  
  4. /// GET: /Home/GetPublicHolidayData  
  5. /// </summary>  
  6. /// <returns>Return data</returns>  
  7. public ActionResult GetCalendarData()  
  8. {  
  9.     ...  
  10.   
  11.     try  
  12.     {  
  13.         // Loading.  
  14.         List<PublicHolidayObj> data = this.LoadData();  
  15.   
  16.         // Processing.  
  17.         result = this.Json(data, JsonRequestBehavior.AllowGet);  
  18.   
  19.        ...   
  20.     }  
  21.     catch (Exception ex)  
  22.     {  
  23.         // Info  
  24.         Console.Write(ex);  
  25.     }  
  26.   
  27.     // Return info.  
  28.     return result;  
  29. }  
  30.  
  31. #endregion 
Step 3
 
Now, create a view and name it "Views\Home\Index.cshtml". The view will contain a simple table.
  1. ...  
  2.   
  3.             <table id="HolidayLstTable" class="table table-bordered table-striped">  
  4.                 <thead>  
  5.                     <tr>  
  6.                         <th style="text-align: center;">Sr.</th>  
  7.                         <th style="text-align: center;">Holiday</th>  
  8.                         <th style="text-align: center;">Date</th>  
  9.                     </tr>  
  10.                 </thead>  
  11.   
  12.                 <tbody>  
  13.                 </tbody>  
  14.             </table>  
  15.   
  16. ... 
In the above code, I have simply created a table that will integrate the jQuery qTip plugin with the User Interface (UI).
 
Step 4
 
Finally, create the JavaScript file "Scripts\script-custom-qtip.js" which will apply the tooltip description using qTip jquery plugin.
  1. $(document).ready(function ()  
  2. {  
  3.     $.ajax(  
  4.     {  
  5.         url: '/Home/GetCalendarData',  
  6.         type: "GET",  
  7.         dataType: "JSON",  
  8.   
  9.         success: function (result)   
  10.         {  
  11. ...  
  12.   
  13.             "<td style='text-align: center;'>" + "<div title='" + data.Desc + "'>" + data.Title + "</div></td>" +    
  14.   
  15. ...  
  16.   
  17.             $('#HolidayLstTable tbody tr td').on('mouseenter''div[title]'function (event)  
  18.             {  
  19.                 $(this).qtip(  
  20.                 {  
  21.                     overwrite: false// Don't overwrite tooltips already bound  
  22.                     show:   
  23.                     {  
  24.                         event: event.type, // Use the same event type as above  
  25.                         ready: true // Show immediately - important!  
  26.                     }  
  27.                 });  
  28.             });  
  29.         }  
  30.     });  
  31. }); 
In the above code, I have made the AJAX call to load the data first into my table and then apply the qTip jQuery plugin.
 
Step 5
 
Now, execute the project and you will be able to see the following in action.
 
ASP.NET MVC - jQuery Tooltip Plugin
ASP.NET MVC - jQuery Tooltip Plugin
 

Conclusion

 
In this article, we learned how to integrate the jQery Qtip plugin with the ASP.NET MVC web platform. Also, we saw how to use AJAX call to load the tooltip data.