工具提示div被列入ul列表溢出

Question

我有一个侧面列表，只显示带有css的工具提示，列表很大，需要使用溢出滚动，但是当启用溢出时，工具提示被父div切断。有人可以帮我解决这个问题吗？

*{padding:0px;margin:0px;}
html, body{background:#000;overflow:hidden;}
.painel
{
    width:15%;
    position:absolute;
    right:0px;
    top:80px;
    bottom:0px;
    overflow: auto;
    min-width:200px;
    background: blue;
}

#users_online ul{list-style-type:none;}
#users_online
{
    /*overflow: auto;*/
    padding-left:5px;
    background: red;
}
#users_online ul li
{
    float:left;
    width:100%;
    border:1px solid transparent;
    padding:0px;
    margin-left:-1px;
    border-right:0;
    position:relative;
    white-space: nowrap;
}
#users_online ul li:hover{border-color:#999; background:linear-gradient(to right, #FFF, #000 160%);}
#users_online ul li a{text-decoration:none; float:left; width:70%; margin-left:10px;font-size:14px;color:#999;line-height:40px;}
#users_online ul li a .name_title{line-height:20px;}
#users_online ul li a .name_data{font-size:12px;line-height:20px;}
#users_online ul li a p span.type_user{font-size:12px;text-transform:capitalize;font-weight:bold;}
#users_online ul li a:hover{color:#000;}

.imgSmall
{
    float:left;
    width:40px;
    height:40px;
    overflow:hidden;
    border-radius:50%;
}
.imgSmall img{width:100%; height:100%;}

.tooltip_user
{
    position:absolute;
}
a.tooltip_user span.toolinfo:hover{text-decoration:none;color:rgb(139,29,30);}
a.tooltip_user span.toolinfo{font-size:14px;display:none;padding:10px 10px;margin-top:-40px;margin-left:-350px;width:310px;line-height:15px;}
a.tooltip_user:hover span.toolinfo{display:inline;position:absolute;border:1px solid #000;background:#CCC;color:#000;z-index:1;}

<div class="painel">	
    <aside id="users_online">
        <ul>
            <?php for($i=1; $i<=20; $i++): ?>
            <li id="<?php echo $i ?>">
                <div class="imgSmall"><img src="pictures/" border="0" /></div>
                <a href="#" class="tooltip_user">     
                    <p class="name_title">Name User Test</p><p class="name_data"><span class="type_user">User</span>/<span class="sec_user">Admin</span></p>

                    <span class="toolinfo">
                        <div style="float:left; width:80px; padding-right: 10px;"><img src="pictures/" border="0" width="80" height="80" style="border-radius:50%;"/></div>
                        <div style="float:right; width:220px;">
                            <p><strong>Name Test</strong></p>
                            <p><strong>User</strong></p>
                            <p>Admin</p>
                            <p><i>email@mail.com</i></p>
                            <br/>
                            <p style="font-size: 12px;">Last view online as 12:12 de 12/12/2012</p>
                        </div>
                    </span>
                </a>
                <span class="status off"></span>
            </li>
            <?php endfor; ?>
        </ul>
    </aside>
</div>