Mouse Hover Popup(with partial view) Using Ajax in MVC

See more:

Ajax

MVC

Hi need to display a popup view while hovering an action link using ajax. but i cant display popup.. i kindly request u clear my issue.. thanks.. following are my codes..


View:
<div class="hover">
<b style="margin-left: -8px; font-size: large;color: #2B9CE2;">
@Ajax.ActionLink(@item.bName, "Businessdetails", "NewSearch", new { id = item.bID }, null
</b>
</div>
@Html.Partial("details");

<div id="popup" style="display:none; width: 100px; height:100px;">
    <b>yasgfshdfhsdhf</b>
    <b>yasgfshdfhsdhf</b>
    <b>yasgfshdfhsdhf</b>
</div>

<script type="text/javascript">
debugger;
$(document).ready(function () {
$(".hover").each(function () {
$(this).mouseover(function () {
$("#popup").dialog({
autoOpen: true,
title: 'Title',
width: '100px',
height: '100px',
modal: true
});

});
$(this).mouseout(function () {
$("#popup").dialog({
autoOpen: false,
});

});
});
});
</script>

Partial View:

<div id="Display">
<div id="map_container"></div><br />
<h2>@item.bName</h2>
<i>@item.City</i>
<b>@item.Address1@item.Address2</b>
<b>@item.MobileNumber</b>
<h4>@item.StartTime@item.EndTime</h4>
<p style="display:none" id="businessid">@item.bID</p>
</div>