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.
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.
4. Create an Index view for listing the events.
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.
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.
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.
9. Now, let’s run the application and click on the event id. The event details will be shown as a tooltip.
This solution can be extended by loading more complex partial views with submit forms and other functionality.
Happy Coding! 🙂