How to Implement tooltip in MVC grid

Download Sample Project

mvc grid tooltip

In my previous post How to customize MVC grid columns, I show how you can control display columns in your grid view. A lot of times you have lot of data that you want to show in your grid view but you are constrained by view of the browser. And at times, you only want to display data when user really wants to see it. Tooltips are perfect examples of such user interface. In this post I will discuss how to show tool tips for columns of your MVC grid view. I am going to show how to use qTip jQuery plug-in to display tool tips on columns. If you are not familiar with use of qTip plug-in, you can download and learn about it by clicking here.

Attach qTip to column

The key to this whole implementation is that you need a way to attach qTip object to element that is going to act as target of mouse actions to trigger display of tooltip. Since we are implementing it for grid columns that means we need a way to attach it to column elements.

        @grid.GetHtml(
    htmlAttributes: new {id="postsgrid"},
        columns: grid.Columns(
            grid.Column("Title", "Blog title"),
            grid.Column("Author", "Blog Author", @<div post-id="@item.PostId">@item.Author</div>),
            grid.Column("DateCreated", "Created On", 
              @<i>@item.DateCreated.ToString("yyyy-MM")</i>, "mystyle", false)
            ),
            mode: WebGridPagerModes.Numeric| WebGridPagerModes.NextPrevious,
            tableStyle: "table table-striped",
            footerStyle: "pagination"
         )

In above code snippet you will notice that I have inserted a div element in second column that is attached to Author property of data set. Another thing to notice about this element is that I have added a custom attribute post-id and assigned it value of unique id of my data element in the data set. I am going to use this custom attribute to find out the columns on which I need to show tool tips and attach it to qTip. By assigning unique identifier of my data element, I can later on extract this value for further use. Now let us see how I am going to use this custom attribue to do the trick.

$(document).ready(function () {
 $('div[post-id]').each(function () {
   var elem = $(this);
   $(this).attchPostColumn({
      events: {
         hoverColumn: function (e) {
      }
   }
  });
 });
});

In above code snippet, I have written small piece of javascript code. When the page is loaded, this code searches for all the elements that had my custom attribute. You are wondering what is attachPostColumn method that is being executed on div element hosting grid column. This is a custom jQuery plug-in that I wrote that does all the hard work of attaching to qTip and specifying right side of parameters for display etc. I will show that plug-in shortly. Before moving on, I would like to stress on that use of post-id name for my custom attribute is just an example. You will be using name that is appropriate and intuitive for your needs.

(function ($) {
    $.fn.attchPostColumn = function (options) {
        var self = this;
        var postId = self.attr("post-id");
        processOptions(options);
        function processOptions(options) {
            if ('events' in options) {
                assignEvents(options.events);
            }
        }
        function assignEvents(events) {
            if ($.isFunction(events.hoverColumn)) {
                self.qtip(
                    {
                        style: {
                            classes: 'qtip-blue'
                        },
                        position: {
                            my: 'bottom center',
                            at: 'top center',
                            target: self
                        },
                        content: {
                            title: 'Post',
                            text: 'loading .....'
                        },
                        show: {
                            delay: 900,
                            when: 'mouseover',
                            solo: true
                        },
                        hide:{when: 'mouseout'},
                        events: {
                            show: function (event, api) {
                                var tooltip = api.elements.tooltip;
                                var dataColumn = api.elements.target.get(0);
                                var postId = dataColumn.attributes["post-id"].value;
                                showPostDataPopup(postId, api);
                            }
                        }
                    }
                );
            }
        }
    }
})(jQuery);

You will notice that I am intercepting show event for qTip. This allows me to provide custom content and header for the tooltip. In this function I make an async AJAX request to server to get detail about post.

 function showPostDataPopup(postId, qTipApi) {
    $.ajax({
        dataType: "json",
        url: "Blog/GetPost",
        data: { postId: postId },
        context:{qTip:qTipApi},
        type: 'POST',
        timeout: 30000,
        success: function (data, textStatus, jqXhr) {
            this.qTip.set('content.title', data.Title);
            this.qTip.set('content.text', constructPostContentTooptip(data));
        },
        error: function (xhr, options, error) {
            alert("error:" + error);
        }
    }
    );
}

As you can see with little javascript tricks I managed to implement tooltips for mvc grid view columns. You can extend this concept to make MVC grid more attractive and user friendly. You can download the sample code for this post by clicking on the link at the top of this post. In subsequent posts I will discuss more customization features for MVC grid. Y

comments powered by Disqus

Search

Social

Weather

30.8 °C / 87.4 °F

weather conditions Clouds

Monthly Posts

Blog Tags