Не подчиняется тултип, помогите.

вопрос

Всем привет. Не давно озадачился одной вещью, как вывод краткой информации через тултип при наведении на иконку которая находиться на постере кинофильма.

Прописал все вроде бы верно, в кратком выводе сделал так чтобы тултип выводился с помощью id новости там же и js код который показывает окошко тоже через id. ~~Короче бред я пишу~~

Дело в том, что когда наводишь мышь, то тултип не показывает информацию как надо, а точнее не возле каждой новости, а перед первой. На скрине, "видно" как указатель мыши направлен на иконку последней новости, но тултип показывается не возле нее а возле первой новости.

Помогите кто сможет))

shortstory.tpl

<script type="text/javascript">
    $(document).ready(function() {
         $('.bt{news-id}').mouseover(function(){
             $('.pan{news-id}').fadeIn();
         }).mouseleave(function(){
                 $('.pan{news-id}').fadeOut();
         });
    });
</script>
<div class="custom-post">
<div class="custom-poster">
<a href="{full-link}" title="{title}">
<img data-src="{image-1}"  />
<div class="custom-text2">{title}</div>
</a>
<div class="mn_play bt{news-id}"></div>
</div>
    <div class="mn_more pan{news-id}">
        <div class="str"></div>
        <div class="mn_m_title">
        {title}
        <span>{category}</span>
        </div>
        <div style="position:relative;overflow:hidden; height: 170px;"><noindex>{short-story}</noindex></div>
    </div>

</div> -->

css

.mn_block {
    float:left;
    width: 175px;
    padding: 5px;
    height: 300px;
    
    margin: 0px 10px 10px 10px;
    position:relative;
    -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
    .mn_b_title {
        height: 30px;
        position:relative;
        overflow:hidden;
        width: 100%;
    }
    .mn_play {
        background: url(../images/play.png) 0px 0px;
        width: 40px;
        height: 40px;
        position:absolute;
        top: 15px;
        left: 150px;
        margin-left:-20px;
    }
        .mn_play:hover {
            background: url(../images/play.png)  0px -40px;
        }

    .mn_block:hover {
        background:#fff;
    }
    .mn_block img, .mn_block a img {
        margin-bottom: 10px;
        height: 254px;
        width: 175px;
    }
    .mn_block h2, .mn_block a  h2 {
        font-weight:bold;
        font-size:12px;
        color:#000;
    }
    .mn_more {
        position:absolute;
        right: 755px;
        top: 440px;
        width: 204px;
        height: 220px;
        background:url(../images/panel_bg.png) #fff repeat-x bottom;
        padding: 10px 10px 30px 10px;
        border: 1px #d8d8d8 solid;
        font-size: 10px;
        z-index: 2;
        display:none;

    }
        
        .mn_m_title {
            color:#474747;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px #e9e9e9 solid;
        }
            .mn_m_title span {
                color:#929292;
                display:block;
            }
        .mn_more .str {
            background:url(../images/strs.png) 100% 0px;
            width: 12px;
            height: 27px;
            position:absolute;
            left: -12px;
            top: 20px;
            
        }