Show tooltips in ASP.NET MVC using qTip

I am playing around with some movie data in a web application as a spike for a future Windows Phone app. I decided to test qTip for showing movie info in a tooltip when clicking on a movie in a table.


Define the movie row

<td class="movieTitle">
  <a href="MovieDetails/@movie.Name" rel="/Labs/MovieDetails/@movie.Id">@movie.Name</a>

Use the following script to bind qTips tooltip for the movie rows

$(document).ready(function () {
  $('a[href*=MovieDetails/][rel]').each(function () {
      content: {
        text: '<img class="throbber" src="../../Content/images/loader.gif" alt="Loading..." />',
        ajax: {
          url: $(this).attr('rel') 
        title: {
          text: $(this).text(), 
          button: true
      position: {
        at: 'bottom center', 
        my: 'top center',
        viewport: $(window), 
        effect: false
      show: {
        event: 'click',
        solo: true
      hide: 'unfocus',
      style: {
        classes: 'ui-tooltip-movie ui-tooltip-light ui-tooltip-shadow'
  .click(function (event) { event.preventDefault(); });

Finally let the controller method MovieDetails handle when a movie is selected and return a PartialView containing the movie details qTip will present as a tooltip.

public PartialViewResult MovieDetails(int id){ 
  var movieService = new MovieService(accessKey", userKey);
  var movie = movieService.GetMovie(id); 
  return PartialView("_MovieDetailsPartial", movie);    

Trackback URL: