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.

Solution

Define the movie row

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

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

$(document).ready(function () {
  $('a[href*=MovieDetails/][rel]').each(function () {
    $(this).qtip(
      {
      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.

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

Trackback URL: https://codeblog.silfversparre.com/2011/11/show-tooltips-in-asp-net-mvc-using-qtip/trackback/