javascript - div 窗口应该在顶部

Question

我需要在图标顶部显示工具提示窗口或 div...我没有固定高度。如果文本超过四行，它会覆盖十字图标... Here is demo

    /*--Tooltip Styles--*/
    .tip_trigger{display:block; padding:6px;}
    .tip {
        color: #333;
        background:#ffffff;
        border:1px solid #747474;
        display:none; /*--Hides by default--*/
        padding:10px;
        margin-left:-143px;
        margin-top:-50px;
        text-align:left; line-height:16px;
        position:absolute;  z-index:1000;
        cursor:auto;
        -moz-box-shadow: 2px 2px 5px #D3D3D3;-webkit-box-shadow: 2px 2px 5px #D3D3D3;box-shadow: 2px 2px 5px #D3D3D3;
    }   

 /*--jQuery --*/

     $(document).ready(function () {
            //Tooltips
            $(".tip_trigger").hover(function () {
                tip = $(this).find('.tip');
                tip.show(); //Show tooltip
            }, function () {
                tip.hide(); //Hide tooltip        
            })

        });

/*  HTML:- --------*/

    <td>
     <a class="tip_trigger">
      <img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
      <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
    </a>
    </td>

Answer 1

不确定这是否是您要找的东西，但谁知道呢:

http://jsfiddle.net/Sbqtv/8/

$(document).ready(function () {
                //Tooltips
                $(".tip_trigger").hover(function () {
                    tip = $(this).find('.tip');
                    tip.show().css('margin-top',-tip.height()); //Show tooltip
                }, function () {
                    tip.hide(); //Hide tooltip          
                })

            });​