JQuery QTip plugin foreach function

I have a problem with qtip plugin. Notting shown in qtip div when I mouseover a user avatar. My code for listing users:

<% foreach (var user in Model){%>
    <div class="avatar">
        <img src="<%=Html.Encode(user.showavatar())%>">    
    </div>
    <div class="username" style="display:none"> 
            <%=Html.Encode(user.Username) %> 
    </div>
<%}%>

My JQuery Code for show u开发者_如何学运维sername when mouseover a user div.

$('.avatar').each(function () {
    $(this).qtip({
        content: {
            content:  $(this).next('.username').html()
        },
        show: 'mouseover',
        hide: 'mouseout'
    })
});

any suggestions?

It looks like you have an extra nested "content" map. Change these lines:

        content: {
            content:  $(this).next('.username').html()
        },

to this:

        content: $(this).next('.username').html(),

$('.avatar').qtip({
    content: {
        content:  $(this).next('.username').html()
    },
    show: 'mouseover',
    hide: 'mouseout'
});

Why you using each function?