Loading Partial View within Tooltip

Question

I would like to use tooltip within my index view so that I can display details for the items in my table on mouseover. The trick is that I would like to use a partial view within the tooptip popup window.

Index View

<script>
$(function () {
    $('#theText').hover(function () {
        $('#theDetails').show();
    }, function () {
        $('#theDetails').hide();
    });
});
</script>

@{bool CanView = ViewBag.IsAdmin;}

@if (CanView == true)
{
<h2>Active Index - Software License (Full Viewer)</h2>

using (Html.BeginForm("Index", "SoftwareLicense", FormMethod.Get))
{
        @Html.AntiForgeryToken()
            <p>
                <button onclick="location.href='@Url.Action("Create", "SoftwareLicense")';return false;">Create</button>
                Search Keyword: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
                <button type="submit">Search</button>
                <button onclick="location.href='@Url.Action("Deleted", "SoftwareLicense")';return false;">View Inactive Software</button>
            </p>
}
<html>
<body>
    <table class="table">
        <tr>
            <th>
                @Html.ActionLink("Software Name", "Index", new { sortOrder = ViewBag.SoftNameSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("License Type", "Index", new { sortOrder = ViewBag.LicenseType, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("End Date", "Index", new { sortOrder = ViewBag.EndDateSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {


            <tr>
                <td id="theText">
                    @Html.DisplayFor(modelItem => item.SoftwareName)
                </td>
                <td id="theDetails">@Html.Partial("_PopupDetails", (WBLA.Models.SoftwareLicense)item)</td>
                <td>
                    @Html.DisplayFor(modelItem => item.LicenseType)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EndDate)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.SoftwareID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.SoftwareID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.SoftwareID })
                </td>
            </tr>
        }
    </table>
    <br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</body>
</html>

Partial View

@model WBLA.Models.SoftwareLicense

<table>
<tr>
    <th>
        @Html.LabelFor(model => model.SoftwareName)
    </th>
    <td>
        @Html.DisplayFor(model => model.SoftwareName)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.SoftwareKey)
    </th>
    <td>
        @Html.DisplayFor(model => model.SoftwareKey)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.Price)
    </th>
    <td>
        @Html.DisplayFor(model => model.Price)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.DepartmentName)
    </th>
    <td>
        @Html.DisplayFor(model => model.DepartmentName)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.LicenseFilePath)
    </th>
    <td>
        @Html.DisplayFor(model => model.LicenseFilePath)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.LicenseType)
    </th>
    <td>
        @Html.DisplayFor(model => model.LicenseType)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.StartDate)
    </th>
    <td>
        @Html.DisplayFor(model => model.StartDate)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.EndDate)
    </th>
    <td>
        @Html.DisplayFor(model => model.EndDate)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.NotifyTime)
    </th>
    <td>
        @Html.DisplayFor(model => model.NotifyTime)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.Email)
    </th>
    <td>
        @Html.DisplayFor(model => model.Email)
    </td>
</tr>
</table>

Results in Browser

https://i.sstatic.net/yNQ0T.png

When I hover over "test1" the tooltip responds as I would like (it expands and shows details like "test10" is displayed), however, the rest of the entries do not respond or collapse on mouseover and mouseoff.

it's not a good idea to use ID selectors on repeating items.. when you use the jquery id selector, you only get the first instance of that ID. $('#theText') returns a single element — JamieD77
– JamieD77, Commented Jul 15, 2016 at 16:03

Mr Lister · Accepted Answer · 2016-07-17 16:48:08Z

1

You should change your <td> elements to use the class attributes to identify them.

<td class="theText">
      @Html.DisplayFor(modelItem => item.SoftwareName)
</td>
<td class="theDetails">@Html.Partial("_PopupDetails", (WBLA.Models.SoftwareLicense)item)</td>

then change your script to work with the class names.

$(function () {
    $('.theText').hover(function () {
        $(this).parent().find('.theDetails').show(); 
    }, function () {
        $(this).parent().find('.theDetails').hide(); 
    });
});

edited Jul 17, 2016 at 16:48

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Jul 15, 2016 at 16:10

JamieD77

14k1 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

YobWerd Over a year ago

Thank you for the help! With your suggestions added to my code it is working, however, upon page load all of the tooltips are open, showing all details. Is there a way to fix that?

JamieD77 Over a year ago

@YobWerd you can set the css style to all .theDetails to display:none on document.ready $('.theDetails').hide(); or in your css file or in your view <style>.theDetails{display:none}</style>

YobWerd Over a year ago

Thank you so much for your help, all is working as expected!

Collectives™ on Stack Overflow

Loading Partial View within Tooltip

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related