Tell me how to solve the problem, the fact is that users are displayed in a cycle, when hovering over the avatar with popover, additional information is displayed, but the fact is that the information that is output using popover is displayed to everyone the same from the first user data
$('.popover-user').popover({ trigger: 'manual', placement: getPlacementFunction(_this.attr("data-placement"),280, 190), animation: false, html: true, title: function() { return $('.popover-user-header').html(); }, content: function() { return $('.popover-user-body').html(); }, }).on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 50); }); <div class="profile_friends popover-user" data-container="body" data-placement="top" data-toggle="popover"> <li> <a href="/u{user-id}" onClick="Page.Go(this.href); return false"> <img src="{ava}"> <div class="profile_friends_title"> {name} {last-name} </div> </a> </li> <div class="popover-user-header> <span id="title-popover-user"></span> </div> <div class="popover-user-body" style="display:none"> <div class='media'> <div class='pull-left'> <a href="/u{user-id}"> <img src='{ava}' alt='Image' class='media-object img-rounded' width="75" /> </a> </div> <div class='media-body clearfix'> <a href="javascript:void(0);" class="link-name"> <span class="media-heading"> {name} {last-name} </span> </a> <small class="btn-block">70 friends in common</small> <div class="btn-block"> <button type="button" class="btn btn-default btn-border btn-xs add-button"> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-plus size-icon-popover ico-add"></i> </button> <button type="button" class="btn btn-default btn-border btn-xs"> <i class="glyphicon glyphicon-envelope"></i> </button> </div> </div> </div>< </div> </div> 
