qTip Implementation in MVC Partial View

Recently, I came across a task wherein I had to show a list of dynamic information in a tooltip in a MVC project. So, I started playing around with qTip. My intent was to load the dynamic information within partial view and to load that partial view inside a qTip tooltip.

This article outlines the steps to show partial view in a tooltip using qTip. For demonstration purpose, we will create a list of events and will show the event details in the tooltip.

1. Create a MVC application.  The first step would be to download the necessary javascript files and css files to implement qTip2. This can be done by either using CDN from http://qtip2.com/download or by installing the Nuget Package using the following command. This will install the necessary jquery dependencies, script files and css files.

Nuget_Package

2. Create Event model as shown below.

3. Create its respective controller called EventController as shown below. This controller class will consist of a GetEvents() private method to load the events in the view.

EventControllerGetEvents

4. Create an Index view for listing the events.

IndexView

5. Upon running this application, the index view would appear as follows. I have used the styles generated by http://www.csstablegenerator.com/ for table.

Output1

6. Now, I need to show event details on the tooltip when the user clicks event id. For this, let’s create a partial view ‘_EventDetailsPartial’ that needs to be loaded within the tooltip.

PartialView

7. Now, let’s include the script to load tooltip on click of event id. In each hyperlink of event id (in Index view), I have added a class ‘tipLink’. In the layout file, we will load qTip2 tooltip for each hyperlink that has class ‘tipLink’. In the “rel” attribute of the hyperlink, I have included the action method “EventDetails” with router parameter event id. On click of each hyperlink, the following script will fire an ajax call to the route specified in “rel” attribute,, which will call the action method “EventDetails”. This method will obtain the event details and will load the partial view “_EventDetailsPartial” inside the tooltip.

script

8. Let’s create the action method “EventDetails” which will load the event details within the tooltip.ActionMethod

9. Now, let’s run the application and click on the event id. The event details will be shown as a tooltip.

Output2

This solution can be extended by loading more complex partial views with submit forms and other functionality.

Happy Coding! 🙂

Advertisements

One thought on “qTip Implementation in MVC Partial View

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s