Popover в bootstrap

pantaleone48 · 4 апр 2016

Здравствуйте, подскажите как решить проблему, дело в том, что в цикле выводятся пользователи, при наведении на аватарку с помощью popover выводится дополнительная информация, но дело в том что информация которая выводящаяся с помощью popover выводится у всех одинаковая из данных первого пользователя

Спойлер html

HTML:

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

Спойлер js

Код:

    $('.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);
    });

$iD · 4 апр 2016

где можно посмотреть рабочий вариант?

Войти или зарегистрироваться

Popover в bootstrap

pantaleone48

$iD Команда форума