ASP.NET MVC: Jquery Tooltip Plugin

Tooltip information is an important user interactive component. In web development customization, a highly interactive tooltips are used that contained links or images along with textual information. A very powerful yet simple Jquery Qtip plugin is available for displaying customize tooltips.

Today, I shall be demonstrating integration of Jquery Qtip plugin with ASP.NET MVC5 platform.

Prerequisites:

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 announce by the Pakistan Government.

Download Now!

Let's begin now.

1) Create a new MVC web project and name it "MvcQtip".  

2) Now, create a controller file and name it "Controllers\HomeController.cs" and write a simple GetCalendarData(...) method which will first load the holidays data from the text file then convert the loaded data into JSON format and finally, return the target JSON data  i.e.

        #region Getpublic holiday data method.

        /// <summary>
        /// GET: /Home/GetPublicHolidayData
        /// </summary>
        /// <returns>Return data</returns>
        public ActionResult GetCalendarData()
        {
            ...

            try
            {
                // Loading.
                List<PublicHolidayObj> data = this.LoadData();

                // Processing.
                result = this.Json(data, JsonRequestBehavior.AllowGet);

               ... 
            }
            catch (Exception ex)
            {
                // Info
                Console.Write(ex);
            }

            // Return info.
            return result;
        }

        #endregion

3) Now, create a view and name it "Views\Home\Index.cshtml". The view will contain a simple table i.e.

...

            <table id="HolidayLstTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th style="text-align: center;">Sr.</th>
                        <th style="text-align: center;">Holiday</th>
                        <th style="text-align: center;">Date</th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>

...

In the above code, I have simply created a table that will integrate the jquery qTip plugin with the User Interface (UI).

4) Finally, create the JavaScript file "Scripts\script-custom-qtip.js" which will the apply tooltip description using qTip jquery plugin i.e.

$(document).ready(function ()
{
    $.ajax(
    {
        url: '/Home/GetCalendarData',
        type: "GET",
        dataType: "JSON",

        success: function (result) 
        {
...

            "<td style='text-align: center;'>" + "<div title='" + data.Desc + "'>" + data.Title + "</div></td>" +  

...

            $('#HolidayLstTable tbody tr td').on('mouseenter', 'div[title]', function (event)
            {
                $(this).qtip(
                {
                    overwrite: false, // Don't overwrite tooltips already bound
                    show: 
                    {
                        event: event.type, // Use the same event type as above
                        ready: true // Show immediately - important!
                    }
                });
            });
        }
    });
});

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.

5) Now, execute the project and you will be able to see the following in action i.e.

Conclusion

In this article, you will learn to integrate Jquery Qtip plugin with ASP.NET MVC web platform. You will also learn to use ajax call to load tooltip data.