javascript - div 窗口应该在顶部

Question

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

    /*--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          
                })

            });​

Answer 2

在这里你有你正在寻找的东西：http: //jsfiddle.net/Sbqtv/7/

我position:relative在你添加了属性，.tip_trigger然后我在类中添加了bottom和right属性.tip。（考虑图像的高度和宽度）

您必须使用相对位置（顶部、底部、左侧、右侧），因为您不知道哪个是尖端的高度。不要使用边距：

.tip_trigger{
    display:block;
    padding:6px; 
    position:relative;
}
.tip {
    color: #333;
    background:#ffffff;
    border:1px solid #747474;
    display:none; /*--Hides by default--*/
    padding:10px;
    text-align:left;
    line-height:16px;
    bottom:50px;
    right:0;
    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;
}   

​</p>

但是当底部图像之一的尖端隐藏顶部图像时，还有另一个问题。