jquery Ui tooltip from partial view mvc

Question

I'm wondering is it possible to have a partial view display in a tooltip. I'm trying to design a page that has a group of students and when I hover over a student some details appear about them, a list of their subjects and some other details. I know I can put the items in the title, but I can't get all the info I need from there, and my details view has the info I need. Thanks in advance

Here's my current code

IEnumerable<StudentApp.Models.Student>

@foreach (var item in Model)
{  <div class="col-md-2 col-sm-4">

           <img  title="@item.Name, @item.StudentNo " class="img img-responsive" src="@item.StudentPic" />

</div>

}

    @section scripts
{
  <script type="text/javascript">
      $(document).ready(function () {
          $(document).tooltip();
      });
   </script>
}

Here's my details view

  <div class="display-label">
     @Html.DisplayNameFor(model => model.Name)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.Name)
</div>


<div class="display-label">
     @Html.DisplayNameFor(model => model.StudentNo)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.StudentNo)
</div>

@foreach (var item in Model.Students)
{
   <li>@item.Course</li>
}

Answer 1

You can use the content option to make the tooltip's contents whatever you need them to be. The MVC code could be placed anywhere in your page, so long as you can use jQuery to grab it (eg. in a noscript tag or some such):

$(document).tooltip({
    items: ".myTooltipClass",
    content: function() {
        // .text() will unescape any contained HTML and render it properly;
        // use .html() if your content doesn't contain additional HTML
        return $("noscript#myMvcContent").text();
    }
});

Here's a fiddle demo: http://jsfiddle.net/guke50uw/

As you can use $(this) inside the content function, you can make use of that with HTML data attributes to return different tooltips for the different items; depends on how your page is structured.

Answer 2

I would use the tooltip's open method and set the content of the tooltip object via AJAX there:

$(document).ready(function () {
    $(document).tooltip({ open: function(event, ui) {
        $(ui.content).load("[url for returning view contents]");
    }
});

you may need to use the instance property of the tooltip or maybe via the ui parameter of the open function to retrieve your student number or other identifier to properly query your partial view, but this should help get you going.