부분 뷰를 툴팁 내에로드하는 중

내 인덱스 뷰 내에서 툴팁을 사용하여 마우스 오버시 테이블의 항목에 대한 세부 정보를 표시 할 수 있습니다. 트릭은 너무 작은 팝업 창에서 부분보기를 사용하고 싶다는 것입니다. 브라우저에서부분 뷰를 툴팁 내에로드하는 중

인덱스보기

<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>

부분보기

@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>

결과

http://i.stack.imgur.com/yNQ0T.png

언제 호 ver "test1"이상으로 툴팁이 응답하면 (확장되어 "test10"과 같은 세부 정보가 표시됩니다), 나머지 항목은 마우스 오버 및 마우스 오프시 응답하지 않거나 축소됩니다.

출처

2016-07-15 YobWerd

반복되는 항목에 ID 선택기를 사용하는 것은 좋지 않습니다. jquery id 선택기를 사용하면 해당 ID의 첫 번째 인스턴스 만 가져옵니다. '$ ('# theText')'는 단일 요소를 반환합니다 – JamieD77

요소를 식별하기 위해 클래스 속성을 사용하도록 <td> 요소를 변경해야합니다.

그런 다음 클래스 이름을 사용하도록 스크립트를 변경하십시오.

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

출처

2016-07-15 16:10:08 JamieD77

도움을 주셔서 감사합니다! 내 코드에 제안 사항이 추가되면 작동하지만 페이지로드시 모든 툴팁이 열려 모든 세부 사항이 표시됩니다. 그 문제를 해결할 수있는 방법이 있습니까? – YobWerd

@YobWerd 당신은 CSS 스타일을 document.ready'$ ('. theDetails'). hide();'또는 CSS 파일이나보기에서''display : none'으로 모든'.theDetails'를 설정할 수 있습니다. ' – JamieD77

모두 도와 주셔서 감사합니다. 모두 예상대로 작동합니다! – YobWerd

부분 뷰를 툴팁 내에로드하는 중

답변

관련 문제